[Next] TanStack Query 소개, 설치 및 셋팅

2022.07.08Woogie.Kim

소개

참고

TanStack Query Documentation Overview

React Query ?

React Query v4부터 TanStack Query로 라이브러리 명이 변경되었다.
앞으로 Solid Query, Vue Query, Svelte Query가 추가로 제공될 예정

TanStack Query

데이터 fetching, caching, synchronizing, updating server state 에 사용
별도의 config파일을 작성할 필요가 없으며 쉽게 커스터마이징이 가능

탄생배경

기존에는 컴포넌트 기반 스테이트(component-based state), 리액트 훅, Redux와 같은 상태관리 라이브러리 등을 사용하여 비동기 데이터를 처리해 왔음
이는 client state를 처리하는 데는 효과적이나 server state를 처리하는데는 효과적이지 못하였음

* server state 의 특징

사용자가 제어하거나 소유하지 않는 위치에서 원격으로 유지됨
비동기 API를 통해 fetching과 updating이 필요
복수의 사람들이 접근이 가능하며 사용자가 모르는 사이 변경 될 수 있음
그렇기 때문에 언제든 데이터가 out of date가 될 수 있음

* server state 관리의 어려움

캐싱
동일 데이터 요청에 대한 중복 요청 제거
백그라운드에서 out of date 데이터 업데이트
데이터가 out of date된 것을 파악하는 것
가능한 한 신속하게 데이터 업데이트 반영
페이지네이션과 Lazy Loading과 같은 성능 최적화
메모리와 server state의 가비지 컬렉션 관리
구조 공유(structural sharing)를 사용하여 쿼리 결과를 Memoizing

간단한 예시

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

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const { isLoading, error, data } = useQuery(["repoData"], () =>
    fetch("https://api.github.com/repos/tannerlinsley/react-query").then(res =>
      res.json()
    )
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

설치 및 셋팅

참고

설치

TanStack Query

리액트 v16.8+ 부터 호환

$ npm i @tanstack/react-query
# or
$ yarn add @tanstack/react-query

Devtools

선택

$ npm i @tanstack/react-query-devtools
# or
$ yarn add @tanstack/react-query-devtools

셋팅

_app.tsx 설정

// _app.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient();

const App = () => {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      ...
      <ReactQueryDevtools initialIsOpen={false} /> // Devtools
    </QueryClientProvider>
  );
};

export default App;