React Query에서 캐싱 기능을 제대로 사용하기 위해 stale time, cache time 등에 대해 잘 알고 있어야 한다. 몇 번을 봤지만 자주 잊어버리기에 간단히 정리해 보고자 한다. Cache? React Query는 설정한 cacheTime 만큼 데이터를 메모리에 저장해 놓는다. React Query에서의 cache는 QueryCache 객체의 query 배열과 queriesInMap 객체에 Query 객체가 존재하는 것을 말한다. 여기서 cache가 존재한다고 해서 refetching을 하지 않는 것은 아니다(데이터가 stale 상태라면 refetching). Stale? stale의 사전적 정의는 위와 같이 '탁한', '신선하지 않은'이라는 뜻이다. 가져온 데이터가 stale 하다면,..

Selector selector는 recoil에서 함수 또는 파생된 상태(atom의 상태에서 파생된 데이터, 즉 atom의 상태에 의존하는 동적인 데이터), atom의 상태에 대해 항상 동일한 값을 반환하는 순수함수. 공식문서: https://recoiljs.org/docs/basic-tutorial/selectors/ selector를 사용하는 이유 최소한의 state만 atom에 저장하고 다른 모든 파생되는 데이터는 selector의 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지할 수 있다. state 관리를 위해 recoil을 사용하고 화면과 분리하여 state를 관리하고자 recoil을 사용하는데, 화면에서 다시 state를 관리하는 로직이 있다면 본래 취지와 어긋나서 로직이 파..

React 컴포넌트의 역할 리액트에서는 화면에 보이는 인터페이스를 설계할 때 ‘컴포넌트’ 단위로 설계가 이루어진다. 컴포넌트는 선언 방식에 따라서 함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다. 함수형(Function) 컴포넌트 자바스크립트의 함수 형태로 표현되는 컴포넌트이다. return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다. function about() { return ( Hello React ) } export default about; 자바스크립트에 익숙한 개발자라면 확실히 직관적이며, 메모리 지원도 클래스형 컴포넌트보다 덜 사용하게 된다. 빌드 후 배포할 때도 함수형 컴포넌트가 파일크기도 더 작아진다. 클래스형(Class) 컴포넌트 import React, {Component} fro..

저번 브라우저의 레더링 과정 포스팅에서 DOM이 HTML을 파싱 한 결과물이란 것을 알게 되었다. 그렇다면 Virtual DOM이 무엇이고 왜 등장한 건지 정리해보려고 한다. Virtual DOM DOM은 노드 하나를 조작할 때마다 리플로우나 리페인트가 수행되면서 브라우저의 성능 저하를 유발하기 때문에 동적인 UI를 구성하는 것에 적합하지 않다. 이러한 문제점을 해결하기 위해 Virtual DOM이 등장하게 되었는데 이 Virtual DOM은 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미한다. 실제로 화면에 렌더링 하는 과정을 거치지 않고 메모리 상에서만 그려지는 DOM이기 때문에 오버헤드(어떤 처리를 하기 위해 들어가는 간접적인 처리 시간/메모리 등)가 훨씬 작다는 특징이..

문제 App.js 더보기 import { useState } from "react"; import useInput from "./util/useInput"; import Input from "./component/Input"; import "./styles.css"; export default function App() { //input에 들어가는 상태값 및 로직을 custom hook으로 만들어봅니다. //until 폴더의 useInput.js 파일이 만들어져 있습니다. const [firstNameValue, setFirstNameValue] = useState(""); const [lastNameValue, setLastNameValue] = useState(""); const [nameArr, s..

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화하는 데 사용되는 훅이다. memo는 memoization을 뜻하는데, 이는 그대로 해석하면 '메모리에 넣기'라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 즉, 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때 마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것. 리액트에서 함수형 컴포넌트는 렌더링 ➡️ 컴포넌트 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거친다. function Component() { let value = cal..

리덕스(Redux) 리덕스는 가장 사용률이 높은 상태관리 라이브러리로서, 리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게 모든 컴포넌트들이 state를 쉽게 공유할 수 있게 해주는 방식이다. 리덕스는 리액트 내부에 있는 기술이 아니며 순수 HTML, JavaScript 내에서도 사용이 가능하다. 리액트와 시너지가 좋으니 대체적으로 리덕스를 사용할 뿐이다. 리덕스를 언제 써야 할까? 프로젝트의 규모가 큰가? Yes: 리덕스 No: Context API 비동기 작업을 자주 하게 되는가? Yes: 리덕스 No: Context API 리덕스를 배워보니까 사용하는 게 편한가? Yes: 리덕스 No: Context API 또는 MobX 리덕스에서 자주 사용되는 키워드 액션(Action) State에 어떤 변화가 ..

useRef useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용이 되는 React Hooks이다. Ref는 'Reference'의 약자로, '참조'라는 뜻이다. 저장공간(변수 관리) 리액트 컴포넌트는 State가 변할 때마다 리렌더링이 되면서 컴포넌트 내부 변수들이 초기화가 된다. 내부 변수들이 초기화 된다는 것은 해당 컴포넌트 함수의 변수들이 모두 초기화가 되고 모든 함수 로직 등이 다시 실행되는 것을 의미합니다. 이렇게 원하지 않는 렌더링 때문에 곤란할 때, State 대신 Ref안에 값을 저장하면 불필요한 렌더링을 막을 수 있다. 또한 컴포넌트가 아무리 렌더링이 되어도 Ref안에 저장되어 있는 값은 변화되지 않고 유지가 된다. 변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때..