2024/06/13 TanStack Query 기초

YIS·2024년 6월 13일

2024.06 TIL 내일배움캠프 정의

[TIL(Today I learned)] 정의

목록 보기

37/43

TanStack Query (React Query)?

서버 상태 관리 라이브러리
React 애플리케이션에서 비동기 데이터를 효율적으로 가져오고,
캐싱하고, 동기화하고, 업데이트를 하며 서버 상태와 관련된 다양한 문제를 해결

설치

npm: npm install @tanstack/react-query
yarn: yarn add @tanstack/react-query

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

특징

1. 데이터 페칭 및 캐싱

서버에서 데이터를 가져오고 이를 캐싱하여 성능을 향상시킴.
동일한 데이터를 여러 번 요청하는 경우,
캐시된 데이터를 사용하여 불필요한 네트워크 요청을 줄임.

2. 자동 리프레시 및 동기화

데이터가 변경되면 자동으로 리프레시하여 최신 상태를 유지
네트워크 상태, 포커스 변경 등에 따라 자동으로 데이터를 다시 가져옴.

3. 배경 데이터 업데이트

사용자가 데이터를 보고 있는 동안 배경에서 데이터를 업데이트할 수 있음.
최신 데이터를 사용자가 인식하지 못하게 비동기적으로 가져옴.

4. 쿼리 무효화 및 재시도

특정 조건이 충족되면 쿼리를 무효화하고 다시 가져옴.
네트워크 오류가 발생하면 자동으로 재시도를 수행.

기본 사용법

1. React Query Client 설정

QueryClient는 TanStack Query의 핵심 객체로, 쿼리 캐시와 관련된 모든 기능을관리
QueryClientProvider를 사용하여 React 컴포넌트 트리에 QueryClient를 제공

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

const queryClient = new QueryClient();

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

2. 데이터 가져오기

useQuery 훅은 데이터를 가져오고, 로딩 상태 및 오류 상태를 관리

import { useQuery } from '@tanstack/react-query';

function YourComponent() {
  const { isLoading, error, data } = useQuery(['yourQueryKey'], fetchYourData);
  //첫 번째 파라미터: 쿼리 키 (고유한 식별자). 배열 형태로 전달하여 유일한 키를 생성
  //두 번째 파라미터: 데이터를 가져오는 비동기 함수.

  if (isLoading) return 'Loading...'; //isLoading: 데이터가 로드 중인지 여부.
  if (error) return 'An error has occurred: ' + error.message;
  //error: 오류가 발생했을 때의 오류 객체.

  return (
    <div>
      {data.map(item => (    //data: 성공적으로 가져온 데이터.
        <div key={item.id}>{item.name}</div>
      ))}
    </div>

  );
}

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

3. 데이터 수정

useMutation 훅은 데이터를 생성, 업데이트, 삭제하는 데 사용.
또한, useQueryClient를 사용하여 쿼리 캐시를 조작할 수 있음

import { useMutation, useQueryClient } from '@tanstack/react-query';

function YourComponent() {
  const queryClient = useQueryClient();

  const mutation = useMutation(newData => {
    // 데이터를 변이시키는 비동기 함수
    return fetch('/api/your-endpoint', {
      method: 'POST',
      body: JSON.stringify(newData),// newData 객체를 JSON 문자열로 변환하여 본문에 포함
    });
  });

  const handleSubmit = async () => {
    const newData = { /* your new data */ };
    await mutation.mutate(newData, {
      onSuccess: () => {// 변이가 성공했을 때 호출되는 함수.
        queryClient.invalidateQueries(['yourQueryKey']);
        //// 특정 쿼리 키와 관련된 데이터를 무효화
      },
    });
  };

  return (
    <button onClick={handleSubmit}>Submit</button>
  );
}