[/\/] Next의 Tanstack Query

티스토리 뷰

Language/Next

[/\/] Next의 Tanstack Query

채._. 2025. 3. 19. 00:29

Tanstack Query

📍Tanstack : 클라이언트 사이드에서 서버 상태 관리를 하는 라이브러리

탠스택은 useQuery 같은 훅을 사용해야 한다.
때문에 Provider 컴포넌트는 반드시 클라이언트 컴포넌트이다.
QueryClientProvider는 React Context를 사용해서 전역 상태를 관리
React의 Context API는 클라이언트 컴포넌트에서만 사용
전역 상태를 관리하기 때문에 최상단(root layout)에 적용

🤔클라이언트 사이드에서만 적용시키는데 왜 전역에 적용해야 할까?

페이지 이동 시 클라이언트 상태가 초기화될 수 있기 때문에 전역에서 캐싱
모든 하위 클라이언트 컴포넌트에서 동일한 QueryClient 인스턴스를 사용

서버 컴포넌트와 클라이언트 컴포넌트

📍서버 컴포넌트와 클라이언트 컴포넌트의 관계

서버 컴포넌트 내부에 클라이언트 컴포넌트가 포함될 수 있는가?
- 가능하다. 서버 사이드에서 랜더링 되어서 정적으로 만들어진 페이지에서
  부분을 차지하는 클라이언트 컴포넌트는 동적으로 작동한다. (전체 페이지는 동적인 페이지가 됨.)
클라이언트 컴포넌트 내부에 서버 컴포넌트가 포함될 수 있는가?
- 불가능하다. 서버 컴포넌트는 서버에서만 랜더링되기 때문에 JS 번들 파일에 포함되지 않는다.
  따라서 브라우저에서만 실행하는 클라이언트 컴포넌트에서는 서버 전용 코드(예: 데이터베이스 쿼리, 파일 시스템 접근 등)를 직접 실행할 수 없다.

Next.js에서 Tanstack 적용 방법

클라이언트 컴포넌트 내부에 서버 컴포넌트 포함은 불가능하지만 간접적인 방법으로는 가능하다.

바로 {children}을 활용하는 방법이다.

tanstack에 적용해서 예시를 들자면,

클라이언트 컴포넌트인 Provider.tsx 파일에 QueryClient를 선언하고 provider 사이에 {children}을 위치시킨다.

// provider.tsx

"use client";

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

import React from "react";

const Provider = ({ children }: { children: React.ReactNode }) => {
  const queryClient = new QueryClient();

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

export default Provider;

그리고 전역에서 관리해야 하기 때문에 최상단 root layout에 provider를 적용시킨다.

//src > app > layout.tsx
...
return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <nav className="flex justify-evenly bg-emerald-800 py-[10px]">
          <Link className="navFont" href={"/"}>
            Home
          </Link>
          <Link className="navFont" href={"/champions"}>
            Champions
          </Link>
          <Link className="navFont" href={"/rotation"}>
            Rotation
          </Link>
          <Link className="navFont" href={"/items"}>
            Items
          </Link>
        </nav>
        <Provider>{children}</Provider> ⭐️
      </body>
    </html>
  );

이제, 전역에서 tanstack을 통해 서버 데이터 상태 관리를 하고 클라이언트 컴포넌트에서 useQuery 같은 훅을 적용할 수 있다.

🤔만약 커스텀 훅을 통해 useQuery를 뺀다면?

커스텀 훅은 “use client”를 명시 X
커스텀 훅을 사용하는 컴포넌트에서 use client 명시하면 자동으로 클라이언트 사이드에서 사용하게 됨

// hooks > queries.tsx

import { useQuery } from "@tanstack/react-query";
import { CHAMPION_IMG_URL } from "../constants/riotDataURL";
import { getChampionRotation } from "@/utils/riotApi";
import { QUERY_KEY } from "../constants/queryKey";

export const getImgUrl = () => {
  return useQuery({
    queryKey: [QUERY_KEY.IMG_URL],
    queryFn: CHAMPION_IMG_URL,
  });
};

export const getRotation = () => {
  return useQuery({
    queryKey: [QUERY_KEY.ROTATION],
    queryFn: getChampionRotation,
  });
};

// rotation > page.tsx

"use client";

import { getImgUrl, getRotation } from "../hooks/quries";
import Card from "@/_components/Card";

export default function Rotationpage() {
  const { data: imgUrl, isPending, isError, error } = getImgUrl();
  const { data: rotation = [] } = getRotation();

  if (isPending) {
    return <div>로딩 중입니다..</div>;
  }

  if (isError) {
    return (
      <>
        <div>에러가 발생했습니다!</div>
        <p>에러:{error.message}</p>
      </>
    );
  }

  return (
  ...

🤔그렇다면 서버에서는 데이터 관리를 어떻게 할까?

서버 컴포넌트에서는 직접 데이터 fetch (tanstack 사용 X)

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

[/\/] Tanstack Query + Zustand 전역 상태 관리하기 (0)	2025.03.21
[/\/] Next.js에서 말하는 '서버'란? (0)	2025.03.19
[/\/] Error Handling (0)	2025.03.19
[/\/] Loading UI - Suspense 와 Streaming SSR (0)	2025.03.11
[/\/] SSG, ISR, SSR, CSR (0)	2025.03.10

공지사항

최근에 올라온 글

최근에 달린 댓글

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

글 보관함

개발 🐾

티스토리 뷰