[react-query] useQuery와 Promise.all을 활용한 리렌더링 최적화
본 게시글의 내용은 React v17까지만 해당합니다. React v18부터는 Promise에도 automatic batching을 지원하기 때문에 2개 이상의 API를 동시 호출해야 할 떼 useQuery 여러번 또는 useQueries를 사용해도 리렌더링이 한 번밖에 되지 않습니다. 🥲 회사에 들어온 지도 4개월이 다 되어간다. 마침 내가 입사한 시기가 운이 좋게도 jQuery로 되어 있던 레거시 프로젝트를 Nextjs로 막 옮기려고 하고 있던 참이었어서 덕분에 일종의 마이그레이션을 경험할 수 있었다. 프로젝트를 옮기면서 동시에 기능에 필요한 API들도 큰 변경이 있었는데, 바로 API 모듈화였다. 아래와 같이 되어 있는 페이지를 상상해보자. 한 페이지를 완성하기 위해 A, B, C, D, E 총 5..
[React] react-query (1) - 소개
(docs에 재밌는 게 보일 때마다 계속 업데이트하고 있습니당..ㅎ) State Management React에서 데이터는 단방향으로 흐르는 구조를 가지고 있다. 데이터가 위에서 아래로, 단방향으로만 흐르게 되면 동일한 상태를 여러 컴포넌트에서 구독해야 할 때(전역에서 상태를 관리해야 할 때), 자식 컴포넌트가 부모 컴포넌트의 상태를 변경할 때 등의 상황에서 Props Drilling 같은 이슈가 발생하거나 상태 관리가 어려워질 수 있다. React 에서는 Context API 라는 전역으로 상태 관리를 할 수 있게 해주는 자체적인 API를 제공하고 있지만 보다 다양한 상태 관리 관련 인터페이스들을 제공하는 Redux, MobX, Recoil 같은 상태 관리 라이브러리들이 계속해서 등장하고 있다. 위와 ..