[/\/] Tanstack Query + Zustand 전역 상태 관리하기

티스토리 뷰

Language/Next

[/\/] Tanstack Query + Zustand 전역 상태 관리하기

채._. 2025. 3. 21. 01:26

Tanstack Query + Context API + Zustand로 전역 상태 관리하기

*Context API : 상태를 전역으로 공유

4주차 숙제

🤔 Tanstack Query + Zustand 왜 같이 쓸까?

탠스택은 서버 상태를 가져오고 캐싱한다.

주스탠스는 클라이언트 상태 관리를 간편하게 할 수 있다.

둘을 함께 사용하면, 서버 상태를 클라이언트 상태로 동기화하는 패턴을 만들 수 있다.

숙제 수행 단계

1. RQProvider.tsx 에서 서버/브라우저 각각 새로운 쿼리 클라이언트 생성

"use client";

import {
  isServer,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

// 서버와 브라우저로 나누어 별도의 쿼리 클라이언트 부여
function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

export default function Providers({ children }: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

2. Root layout에 provider로 감싸기

...

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Providers>{children}</Providers>
      </body>
    </html>
  );

3. route.ts에서 라우트 핸들러 생성

import { NextResponse } from "next/server";

export async function GET() {
  const count = { value: 0 };
  return NextResponse.json(count);
}

4. queryApi.ts에서 라우트 핸들러 경로에서 데이터 페칭 함수 생성

export const getCounts = async (): Promise<number> => {
  const res = await fetch("/api/counts");
  const data = await res.json();

  return data;
};

5. page.tsx에서 프리페치쿼리로 정적 html 만들어서 주입(쿼리함수 : 데이터 페칭 함수)

import {
  dehydrate,
  HydrationBoundary,
  QueryClient,
} from "@tanstack/react-query";
import Counter from "./_components/counter";
import { getCounts } from "./utils/queryApi";

export default function Home() {
  const queryClient = new QueryClient();

  // 프리페치
  queryClient.prefetchQuery({
    queryKey: ["count"],
    queryFn: getCounts,
  });

  return (
    // 프리페치를 정적 html로 만들어서 주입
    <HydrationBoundary state={dehydrate(queryClient)}>
      <Counter />
    </HydrationBoundary>
  );
}

6. countStore.ts에서 Zustand 스토어 생성

import { create, StoreApi } from "zustand";

export type CountState = {
  count: number;
  increment: () => void;
  decrement: () => void;
};

export const createCounterStore = create<CountState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

🤔TanstackProvider는 root layout에서 감쌌는데, Zustand는?

일반적인 경우엔 Zustand Provider가 필요 없다.

Provider 없이 전역 상태 관리 가능
하지만 서버 컴포넌트와 연동해야 하거나, 특정 컴포넌트만 독립적인 Zustand 상태를 가져야 할 경우에는 Provider가 필요함.
SSR에서 초기 상태를 주입해야 할 경우에도 Provider가 필요할 수 있음.

=> 굳이 서버 컴포넌트와 연결할 필요가 없어서 Zustand Provider 적용 안 함

🤔 counter.tsx에서 서버 데이터를 캐싱한 useQuery 값을 사용할지, Zustand Store로 값을 관리할지

서버 데이터를 이용할지 말지 결정하기

라우트 핸들러에서 설정한 초기값 (value : 0)을 useQuery에서 캐싱 중
서버에서 캐싱 중인 값을 사용(그 값으로 초기화)하려면 클라이언트 컴포넌트에서 useQuery와 useEffect 사용
Store에서 설정한 초기값을 사용하고 클라이언트 내부에서만 상태를 관리하려면 Zustand만 사용

=> 마찬가지로 클라이언트에서만 상태 관리 위해 Zustand만 사용

✔️ Zustand Provider 사용 이유

컨텍스트(Context API)와 함께 Zustand를 사용할 때 관리가 필요
Provider 패턴을 사용하여 Zustand 상태를 Context로 감싸는 방법 사용

// CountProvider.tsx

// 서버에서 Zustand 상태를 전달해야 하는 경우 Provider 필요

"use client";

import { CountState, createCounterStore } from "@/countStore";
import { createContext, ReactNode, useRef } from "react";
import { StoreApi } from "zustand";

// 초기값 null : 외부에서 사용 시 오류 발생
export const CountContext = createContext<StoreApi<CountState> | null>(null);

export type CounterProviderProps = {
  children: ReactNode; // Provider 내부에 모든 JSX 요소 가능
};

export function CountProvider({ children }: CounterProviderProps) {
  // useRef : Zustand 상태(storeRef.current) 한 번만 생성(불필요한 리렌더링 방지)
  const storeRef = useRef<StoreApi<CountState> | null>(null);
  // 스토어가 없을 때 새롭게 생성(처음 마운트 시) / 이미 있다면 기존 상태 유지
  if (!storeRef.current) {
    storeRef.current = createCounterStore();
  }
  return (
    // 하위 컴포넌트에게 현재 Zustand 상태 전달
    <CountContext.Provider value={storeRef.current}>
      {children}
    </CountContext.Provider>
  );
}

createCounterStore: Zustand 상태를 생성하는 함수 (countStore.ts에서 정의)
CountState: Zustand 상태의 타입 정의 (countStore.ts에서 가져옴)
createContext: React의 Context API로 상태를 전역으로 공유할 때 사용
ReactNode: children의 타입으로 사용 (Provider 안에 어떤 JSX 요소든 올 수 있도록 설정)
useRef: React의 참조(ref) 훅으로 한 번만 Zustand 스토어를 생성하도록 보장
StoreApi: Zustand의 create 함수가 반환하는 스토어 객체의 타입

'Language > Next' 카테고리의 다른 글

[사람별] Next.js 에러 핸들링 (error.tsx) (5)	2025.04.26
[/\/] Route Handler, Server-Action (0)	2025.03.22
[/\/] Next.js에서 말하는 '서버'란? (0)	2025.03.19
[/\/] Error Handling (0)	2025.03.19
[/\/] Next의 Tanstack Query (0)	2025.03.19

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/03 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

개발 🐾

티스토리 뷰