[React.js] Tanstack Query(React Query)

Tanstack Query(React Query)

들어가며

• React Query라고 불린 Tanstack Query 라이브러리에 대해 정리해본다.

 

Tanstack Query(React Query)

개념

• 리액트 애플리케이션에서 서버 상태(데이터)를 쉽게 관리하고 조작할 수 있도록 도와주는 라이브러리
• React Query가 2022년 초에 Tanstack Query로 이름이 변경되었다.
  • React Query가 포함된 Tanstack 생태계를 확장하고, 다양한 프레임워크와 플랫폼에서 사용할 수 있는 범용 데이터 페칭 및 상태 관리 라이브러리를 목표로 하기 위해서 였다고 한다.
  • Tanstack Query는 이제 React뿐만 아니라 Vue, Svelte, Solid와 같은 다른 프레임워크에 대한 지원도 포함하고 있으며, Tanstack Query로의 이름 변경은 React Query의 기능적 변화보다는 브랜딩과 생태계 확장을 반영한 것이라고 한다.

 

설치

• 터미널에 아래 명령을 실행하여 설치할 수 있다.

$ npm install @tanstack/react-query   # yarn add @tanstack/react-query

 

주요 기능

데이터 페칭(Fetching Data)

• 데이터를 서버에서 가져와서 리액트 컴포넌트와 동기화하는 작업을 간단하게 처리할 수 있다.
• @useQuery@ 훅을 사용하여 데이터를 가져오고, 로딩 상태와 오류 상태를 쉽게 관리할 수 있다.

 

데이터 변조(Mutating Data)

• 데이터를 서버에 보내서 생성, 수정, 삭제하는 작업을 수행할 수 있다.
• @useMutation@ 훅을 사용하여 이러한 변조 작업을 간편하게 수행할 수 있다.

 

자동 리페치(Automatic Refetching)

• 사용자가 탭을 전환하거나 네트워크 상태가 변경될 때 데이터를 자동으로 다시 가져올 수 있다.
• 특정 이벤트나 시간 간격에 따라 자동으로 데이터를 새로 고칠 수 있다.

 

캐싱(Caching)

• 가져온 데이터를 캐시에 저장하여 동일한 데이터 요청 시 불필요한 네트워크 요청을 줄일 수 있다.
• 캐시된 데이터를 사용하면서 배경에서 새로운 데이터를 가져오는 기능을 제공한다.

 

병렬 및 의존 쿼리(Parallel and Dependent Queries)

• 여러 쿼리를 병렬로 실행하거나, 특정 쿼리가 완료된 후에 다른 쿼리를 실행할 수 있다.

 

쿼리 무효화(Query Invalidation)

• 특정 이벤트가 발생할 때 캐시된 데이터를 무효화하고, 데이터를 새로 가져오게 할 수 있다.

 

낙관적 업데이트(Optimistic Updates)

• 데이터를 변경할 때, 서버의 응답을 기다리지 않고 UI를 즉시 업데이트하여 사용자 경험을 향상시킬 수 있다.

 

 

Tanstack Query를 사용해야 하는 이유?

• 간편함
  • 복잡한 상태 관리 로직을 단순화하여 코드의 가독성과 유지 보수성을 높인다.
  • 내장된 훅을 사용하여 데이터 페칭과 상태 관리를 쉽게 처리할 수 있다.
• 효율성
  • 캐싱과 자동 리페치 기능을 통해 불필요한 네트워크 요청을 줄이고, 애플리케이션의 성능을 향상시킨다.
• 확장성
  • 병렬 및 의존 쿼리, 쿼리 무효화 등 고급 기능을 통해 복잡한 요구사항도 손쉽게 처리할 수 있다.
• 사용자 경험 향상
  • 낙관적 업데이트, 자동 리페치 등의 기능을 통해 사용자에게 더욱 반응성 있는 UI를 제공할 수 있다.

 

예제 코드

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

// QueryClient 인스턴스 생성
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

function MyComponent() {
  // 데이터 페칭
  const { data, error, isLoading } = useQuery('fetchData', fetchData);

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error: {error.message}</span>;

  return <div>Data: {JSON.stringify(data)}</div>;
}

async function fetchData() {
  const response = await fetch('/api/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

 

Tanstack Query의 사용은 필수가 아니다. useEffect와 fetch를 이용하여 동일한 기능을 언제든지 만들 수 있다.

 

 

참고 사이트

TanStack Query