React/Hooks (6) 썸네일형 리스트형 React memo, useCallback 올바로 사용하기 리액트에서 리렌더링은 빈번히 일어난다. 리렌더링은 컴포넌트를 구성하는 함수를 다시 실행하는 것이라고 생각하면 좋다. 리렌더링의 목적은 state 변화로 무엇이 달라졌는지를 파악하기 위해서이고 부모의 state가 변했으면 당연 말단 자식까지 전부 리렌더링이 된다. 때문에 자식이 많고 복잡한 부모 컴포넌트일수록 리렌더링시에 많은 연산을 하게 된다. (여기에서의 리렌더링은 실제 DOM과는 관련이 없고 Virtual DOM을 생성하기 위한 리렌더링이다.) 이러한 경우를 위해 React.memo를 쓸 수 있다. 자식 컴포넌트에 memo를 쓰면 props의 값들을 메모리에 저장하고 리렌더링시에 비교하여 값이 달라졌을 때에만 자식 컴포넌트를 렌더링시키고 그렇지 않으면 건너뛴다. 메모리에 저장하는 것과 비교하는 로직이.. setState의 파라미터에 반드시 함수를 넣어야 하는 경우 useState 훅을 이용하면 state와 setState 함수를 얻을 수 있다. const [state, setState] = useState(0); setState 함수에 값을 넣으면 리액트 컴포넌트가 리렌더링 되고 state 값을 바꾼다. setState(1); 그러나 간혹 setState 함수에 함수를 넣는 경우가 있다. setState((state) => state + 1); 이전의 state 값을 불러와서 1을 더한다는 뜻이다. 아래와 별반 다를 게 없을 것 같다. const [state, setState] = useState(0); /* ... */ setState(state + 1); useState에서 받는 state 값도 이전의 값일 것이기 때문이다. 그러나 state가 여럿일 경우에 .. React Query를 이용해서 API를 쉽게 연동하는 방법 리액트의 상태를 관리하는 state는 핵심 개념이다. 리액트 개발자가 되려면 state에 대해서 빠삭하게 알아야 한다. 그러나 리액트는 기본적으로 서버 데이터를 state처럼 다루지는 않는다. 개발자가 useEffect 등을 써서 state에 직접 넣어줘야 한다. 만약 서버 데이터를 state처럼 다룰 수 있다면 코드도 짧아지고 좀 더 리액트스럽게 개발을 할 수 있다. state가 바뀔 때만 리렌더링 되는 것처럼 서버 데이터가 바뀔 때만 리렌더링 된다면 서버 데이터 역시도 state처럼 상태 관리가 된다. 이를 가능하게 해주는 라이브러리 중 하나가 React Query다. 리액트 쿼리는 훅으로서 다음과 같은 형태로 쓸 수 있다. const App = () => { const { data } = useQu.. React Query 기본 리액트 쿼리를 제대로 쓰기 위해 작동하는 기본 원리를 다룬다. Stale이란 리액트 쿼리는 기본적으로 캐시된 데이터를 stale한 상태로 여긴다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다. - 새로운 query 인스턴스가 마운트될 때 (useQuery가 처음 호출될 때, Whenever a new component that calls useQuery mounts, React Query will do a revalidation) - 브라우저 화면을 이탈했다가 다시 포커스할 때 - 네트워크가 다시 연결될 때 - 특별히 설정한 refetch interval에 의해서 (refetchInterval) refetchOnWindowFocus 옵션 등으.. React Hooks의 State 동작 원리 리액트 컴포넌트는 state가 변할 때마다 다시 실행된다. 잦은 state 변화가 발생하는 경우 내부적으로 어떻게 작동하는지를 알고 있지 못한다면 심각한 성능 이슈를 초래할 수 있다. 한편 2021년 기준으로 함수형 컴포넌트가 메인이 되면서 state 관리는 hooks가 맡아서 하게 됐다. 여기서는 주요 hooks에서 제공하는 state의 변화에 따라 리액트가 어떻게 반응하는지를 다뤄보겠다. State 변화에 따라 어떻게 동작하는가? 리액트의 function 컴포넌트는 최초에 한 번 실행이 되고 나서 초기값으로 설정해 놓은 state를 기억하고 있는다. // 0을 초기값으로 한다. const [state, setState] = useState(0); 버튼 클릭 이벤트 등으로 setState가 호출되면 다.. React.memo 번역 리액트의 memo는 higer order component다. 클래스에서 사용되는 PureComponent와 비슷하다. React.memo로 렌더링 될 함수 컴포넌트를 감싸주면 마지막에 렌더링된 값을 기억했다가 내려오는 props가 같을 때 렌더링을 건너 뛰고 기억했던 값을 재사용한다. React.memo는 props의 변화만 체크한다. memo로 감싸준 함수 컴포넌트에 useState나 useContext를 사용하면 state나 context가 변할 때에는 다시 렌더링한다. 기본적으로는 props에 있는 객체들을 얕은(shallowly) 방식으로 비교하지만 두 번째 인자를 활용해서 사용자가 원하는 방식으로 비교할 수도 있다. 이 함수는 오직 성능 최적화를 위해서 존재한다. 렌더링을 막기 위한 목적으로 .. 이전 1 다음
