TanStack Query (React Query) 공식문서 정복하기 (1)

오늘 포스트는  Tanstack Query 공식문서를 읽고  Tanstack Query에 대한 개념과 사용방법에 대해 작성해 볼 것이다. 공식문서에 대한 포스트는 양이 많아질 것으로 예상되어 여러 포스트로 작성될 예정이다 ! 

 

TanStack Query란?(React Query)

TanStack Query( 이전에는 React Query)는 웹 애플리케이션의 데이터 패칭 라이브러리로, 서버 상태를 쉽게 패칭, 캐싱, 동기화 및 업데이트할 수 있도록 해준다.   

한마디로 강력한 비동기 상태관리 툴. 

 

 

공식문서에서는 기존에 존재하는 다른 상태 관리 라이브러리(redux, zustand, recoil..)는 클라이언트 상태를 다루기에는 좋지만, 비동기나 서버 상태를 다루기에는 적합하지 않다고 설명되어 있다. 

 

여기서 계속해서 언급하는 단어가 서버상태인데 서버 상태에 대해 먼저 짚고 넘어가보자 . 

 

서버 상태란 ?

한마디로 클라이언트에서 제어하지 않거나 소유하지 않은 위치에 관리되는 상태 특성으로는 아래 4가지가 있다. 

 

1. 원격으로 유지되며, 제어하거나 소유할 수 없음
2. 패칭과 업데이트를 위해 비동기 API 가 필요
3. 소유권이 공유되며 사용자가 모르는 사이에 다른 사용자가 변경 가능
4. 주의하지 않으면 애플리케이션에서 오래된 상태가 될 수 있음 
    

여기서 서버상태의 특성을 이해하면 추가적으로 발생하는 문제점에 대해서도 알게 될 것이다. 

서버 상태 문제점 

 

1. 캐싱 (프로그래밍에서 가장 어려운 것 중 하나)
2. 동일한 데이터에 대한 여러 요청을 단일 요청으로 병합
3. 백그라운드에서 "오래된" 데이터 업데이트
4. 데이터가 "오래된" 시점 파악
5. 데이터 업데이트를 가능한 빨리 반영
6. 페이지네이션 및 지연 로딩과 같은 성능 최적화
7. 서버 상태의 메모리 및 가비지 컬렉션 관리
8. 구조적 공유로 쿼리 결과 메모이제이션

 

 

 

탄스택 쿼리는 이러한 서버 상태 문제들을 해결하고 데이터를 제어할 수 있도록 도와주기 위해 탄생했다. 

 

Tanstack Query 예제 

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 { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
        res.json(),
      ),
  });

  if (isPending) 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>
  );
}

 

 

간단하게 예제를 살펴보면  QueryClient 를 선언하고 사용하는데 여기서 QueryClient 는 모든 쿼리에 대한 상태 및 캐시를 가지고 있는 클래스로 전역적으로 옵션을 설정할 수 있다. 

가장 최상위의 컴포넌트에서 QueryClientProvider 를 감싸주고 client 로 선언한 QueryClient를 전달해주면 초기 설정은 끝난다. 

예제에서는 useQuery 를 사용했는데 useQuery는 서버에서 데이터를 받아올 때 사용하는 기능으로 이에 대해선 다음 블로그에서 자세하게 설명하겠다 ! 

 

벌써부터 탄스택 쿼리에 대해 한발짝 가까워진 기분이다. 다음 포스트는 useQuery와 useMutation 그리고 각 옵션들에 대해 작성할 것이다. 

 

참고 

https://tanstack.com/query/v5/docs/framework/react/overview 

Overview | TanStack Query React Docs