내일배움캠프 React_7기 TIL - 33. Tanstack Query

TanStack Query

TanStack Query (구 React Query) 는 React 애플리케이션에서 서버 상태를 효율적으로 관리하기 위한 라이브러리이다. 서버 데이터의 fetching, caching, synchronizing, 그리고 업데이트 로직을 간편하게 구현할 수 있다.

특징

1. 간단한 데이터 fetching 및 캐싱

• 데이터를 가져오고 자동으로 캐싱하며, 동일한 데이터를 다시 요청할 경우 캐시된 데이터를 활용한다.
• 네트워크 요청 횟수를 줄이고 성능을 최적화한다.

2. 실시간 데이터 동기화

• 서버 데이터가 변경될 때 UI를 자동으로 업데이트한다.
• 데이터가 오래되었다고 판단되면 재요청을 통해 동기화를 유지한다.

3. 유연한 상태 관리

• 로딩 상태, 오류 상태, 성공 상태를 간편하게 관리할 수 있다.
• 복잡한 로직을 최소화하여 코드 가독성을 높인다.

4. 재시도 및 백오프 로직

• 네트워크 요청 실패 시 자동으로 재시도하며, 점진적 백오프(backoff) 전략을 통해 안정성을 보장한다.

5. DevTools 지원

• TanStack Query DevTools를 통해 캐시 상태와 쿼리 상태를 시각적으로 확인할 수 있다.

사용 예시

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

const fetchPokemon = async () => {
  const { data } = await axios.get('https://pokeapi.co/api/v2/pokemon');
  return data;
};

const PokemonList = () => {
  const { data, isLoading, error } = useQuery(['pokemon'], fetchPokemon);

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

  return (
    <ul>
      {data.results.map((pokemon) => (
        <li key={pokemon.name}>{pokemon.name}</li>
      ))}
    </ul>
  );
};

---

장점과 단점

장점

• 데이터 상태 관리 간소화
• 성능 최적화(캐싱 및 중복 요청 방지)
• DevTools로 디버깅 편리
• 타입스크립트 지원

단점

• 초기 학습 곡선
• 간단한 애플리케이션에서는 오히려 오버엔지니어링일 수 있음

---

정리

TanStack Query는 서버 데이터 상태 관리와 관련된 문제를 쉽게 해결할 수 있는 강력한 도구이다. 특히, 복잡한 API 호출과 실시간 동기화가 필요한 프로젝트에서 생산성을 크게 향상시킬 수 있다.