TanStack Query: 서버 상태 관리의 끝판왕 가이드 🚀

TanStack Query (React Query)를 처음 시작하는 당신을 위해

Table Of Contents

TL;DR

TanStack Query란?

짧게 말하면, TanStack Query는 웹 어플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 해 주는 라이브러리다.

 

먼저 공식 소개글을 보자.

1. main description

Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular

TS/JS, React, Solid, Vue, Svelte and Angular를 위한 강력한 비동기 상태 관리 매니저

TanStack Query는 v3까지는 React Query라는 이름으로 제공되었는데, v4부터 React 뿐만이 아니라 Solid, Vue, Svelte, Angular같은 프레임워크, 그리고 Vanilla JS/TS에서도 사용할 수 있도록 확장되었다.

더불어, TanStack에는 TanStack Query 말고도 풀스택 React 프레임워크인 TanStack Start(알파버전), React를 위한 라우팅 라이브러리 TanStack Router, 표 형식의 데이터 표시와 상호작용을 편하게 해 주는 TanStack Table, form 상태 관리를 위한 TanStack From같이 편의성을 위한 라이브러리가 많으니 한번 알아보면 좋을 것 같다.

TanStack Query의 기능들

TanStack Query는 아래와 같은 기능들을 제공한다.

2. features

나는 당장 사용할 것 같은 기능들만 알아봤다. 그런데도 이렇게 많다...😯

Auto Refetching (자동 재요청)

Parallel Queries (병렬 쿼리)

Dependent Queries (의존적인 쿼리)

Automatic Garbage Collection (자동 가비지 컬렉션)

Request Cancellation (요청 취소)

Prefetching (사전 요청)

SSR Support (SSR 지원)

Auto Caching (자동 캐싱)

Paginated/Cursor Queries (페이지네이션/커서 쿼리)

Load-More/Infinite Scroll Queries (더 보기/무한 스크롤 쿼리)

설치 및 사용하기

설치하기

우선 라이브러리를 설치해주자! npm이나 yarn 등, 원하는 패키지 매니저로 설치할 수 있다.

npm i @tanstack/react-query

또는

pnpm add @tanstack/react-query

또는

yarn add @tanstack/react-query

또는

bun add @tanstack/react-query

ESLint 플러그인 또한 제공해주고 있으니, ESLint와 함께 사용하고 싶으면 npm i -D @tanstack/eslint-plugin-query처럼 ESLint 플러그인도 함께 설치해주자. 설정은 .eslintrc 등에서 따로 해줘야 한다!

세팅하기

TanStack Query의 hook들을 이용하려면 <QueryClientProvider>를 이용해서 앱을 한번 감싸주어야 한다. 그렇지 않으면 ``를 찾을 수 없기 때문에 에러가 발생하게 된다.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; const queryClient = new QueryClient(); function App() { return ( <QueryClientProvider client={queryClient}> {/* 다른 컴포넌트들 */} </QueryClientProvider> ); }

useQuery로 하나의 데이터 불러오기

Provider로 queryClient를 제공해줬다면, 이제 useQueryuseQueries, useInfiniteQuery같은 hook들을 사용할 수 있다.

query를 요청할 때에는 꼭 query key를 지정해야 한다.

아래 예시에서는 useQuery({ queryKey: ["todos"], queryFn: getTodos })에서 볼 수 있듯이, ["todos"]라는 key를 제공하고 있다.

import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from "@tanstack/react-query"; import { getTodos, postTodo } from "../my-api"; // Create a client const queryClient = new QueryClient(); function App() { return ( // Provide the client to your App <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> ); } function Todos() { // Access the client const queryClient = useQueryClient(); // Queries const query = useQuery({ queryKey: ["todos"], queryFn: getTodos }); // Mutations const mutation = useMutation({ mutationFn: postTodo, onSuccess: () => { // Invalidate and refetch queryClient.invalidateQueries({ queryKey: ["todos"] }); }, }); return ( <div> <ul> {query.data?.map((todo) => ( <li key={todo.id}>{todo.title}</li> ))} </ul> <button onClick={() => { mutation.mutate({ id: Date.now(), title: "Do Laundry", }); }} > Add Todo </button> </div> ); } render(<App />, document.getElementById("root"));

개념

Query

Query Key

Query Functions

반환값

const result = useQuery({ queryKey: ["todos"], queryFn: fetchTodoList });

Mutation

여담

3. make me a title

왜 이름이 TanStack일까...🤔

하고 페이지를 내려보고 있었는데

개발자 계정이 @TannerLinsley라고 한다. 그러면 Tanner의 stack...같은 느낌이겠지?