📦 Providers 컴포넌트의 역할

Providers는 React 애플리케이션의 공통 context provider들을 하나로 묶는 상위 wrapper 컴포넌트다. 이 구조는 전체 앱에서 필요한 글로벌 상태, 테마, 인증, React Query 등의 기능들을 일관되게 제공할 수 있도록 구성됩니다.

QueryClientProvider

• 소속: @tanstack/react-query
• 역할: React Query의 클라이언트 인스턴스를 전체 React 트리에 공급한다.
• 기능: useQuery, useMutation 등 React Query의 모든 훅은 내부적으로 이 provider로부터 QueryClient 인스턴스를 참조한다.

<QueryClientProvider client={queryClient}>
  ...
</QueryClientProvider>

QueryClientProvider를 최상단에 배치함으로써 앱 전역에서 일관된 React Query 캐시를 사용할 수 있다.

new QueryClient()는 캐시 저장소를 생성하는데, 홈페이지 첫 접속 이후 다른 페이지로 이동해도 캐시가 초기화되지 않도록 useState로 감싸서 한 번만 생성해 유지한다.

HydrationBoundary

• 소속: @tanstack/react-query
• 역할: 서버에서 사전 fetch된 React Query 데이터를 클라이언트로 전달(=하이드레이션)하는 boundary입니다.
• 사용 목적: SSR에서 React Query의 캐시 상태(dehydrate(queryClient))를 클라이언트에서 재사용하도록 보장한다.
• 기능적 흐름:
  1. 서버에서 prefetchQuery를 호출해 데이터를 QueryClient에 미리 로드
  2. dehydrate(queryClient)를 통해 캐시 상태를 직렬화
  3. 클라이언트에서 HydrationBoundary state={...}를 통해 해당 상태를 다시 불러옴

<HydrationBoundary state={dehydratedState}>
  <Component />
</HydrationBoundary>

만약 state가 제공되지 않는 경우, HydrationBoundary는 아무런 하이드레이션 로직을 수행하지 않습니다. 따라서 SSR/SSG 환경에서 실질적인 데이터 재활용을 하려면 state를 명시해야 합니다.

🧩 정리