다른 프로젝트 아키텍쳐에서 React Query를 사용한 것을 본 적이 있는데, 오늘 토스 컨퍼런스에서도 React Query가 언급되어서 찾아봤다.
React Query
React Query란 데이터 패칭 라이브러리다. 데이터를 패칭하는 기능 뿐만 아니라 Devtools, 캐싱, 서버 상태 동기화 및 업데이트 등 많은 기능을 지원한다. 데이터가 필요한 곳에서 useQuery를 사용하며 서버 데이터를 캐싱한다. 어떤 데이터를 사용하는 컴포넌트가 여러개일 경우 각 컴포넌트들에서 같은 쿼리 키를 가진 useQuery를 사용함으로써 한 번의 패칭으로 모두 데이터를 사용할 수 있게 된다. 패칭하여 데이터를 스토어에 저장한 후 전역에서 해당 데이터를 사용할 수 있게 해주는 redux와 비슷한 것을 알 수 있으며 redux의 액션, 리듀서 등의 보일러플레이트를 작성하지 않고 서버 데이터를 관리할 수 있는 도 다른 대안이 될 것이다. 예전에 마켓컬리 클론코딩에서 props drilling을 한 것을 Context API로 중간 컴포넌트를 거치지 않고 할 수 있다는 것을 알게 되었는데, React Query를 사용하면 보다 더 간결한 코드를 작성할 수 있는 거 같다.
SSR(서버 사이드 렌더링)
React Query는 SSR을 두 가지 방식으로 구현할 수 있다. initialData를 주는 방법과 Hydration을 하는 방법이다. initialData를 통한 방법은 데이터를 명시해주기만 하면 되기 때문에 훨씬 간단하지만, 여러 컴포넌트에서 해당 데이터를 SSR을 통해 사용자에게 보여준다고 한다면, 모든 컴포넌트에 initialData를 넘겨줘야 하기 때문에 넘겨줘야 하는 대상 컴포넌트가 컴포넌트 트리 상에서 depth가 깊이 있는 컴포넌트 일 때는 관리가 어렵고 비효율적이다. 반면, Hydration을 통한 방법은 SSR을 할 때 원하는 쿼리를 prefetch하고 해당 쿼리를 사용하는 컴포넌트에서는 동일한 키로 useQuery 훅을 호출하기만 하면 된다.
