TanStack Query를 사용하는 이유와 활용법

React 애플리케이션에서 데이터를 효율적으로 관리하는 것은 매우 중요합니다. 특히 서버 상태를 다룰 때, 데이터를 가져오거나 갱신하는 과정을 최적화하는 것은 개발자의 생산성과 사용자 경험 모두에 큰 영향을 미칩니다. 이런 문제를 해결하기 위한 도구 중 하나가 바로 TanStack Query(구 React Query)입니다.

이번 포스팅에서는 TanStack Query를 사용하는 이유와 장점을 설명하고, 구체적인 활용 방법과 사례를 통해 왜 React 개발자들이 이 도구를 선호하는지 살펴보겠습니다.

---

1. TanStack Query란?

TanStack Query는 서버 상태 관리에 특화된 React 라이브러리로, 다음과 같은 기능을 제공합니다:

• 서버 데이터를 효율적으로 가져오고 캐싱함
• 데이터의 갱신과 동기화를 간편하게 처리함
• 자동 재시도 및 오류 처리 기능 지원
• DevTools를 통한 디버깅과 성능 분석 지원

이를 통해 기존의 상태 관리 도구(Redux, MobX 등)로 처리하기 복잡했던 서버 상태 관리를 단순화할 수 있습니다.

---

2. TanStack Query를 사용하는 이유

1) 서버 상태 관리 최적화

React 애플리케이션은 로컬 상태와 서버 상태를 모두 다룹니다. 하지만 서버 상태는 다음과 같은 특징을 가지기 때문에 관리가 어렵습니다:

• 비동기적으로 동작함
• 데이터를 여러 컴포넌트에서 공유함
• 정합성 문제를 쉽게 야기할 수 있음

TanStack Query는 이러한 서버 상태를 자동으로 관리하고, 복잡한 로직을 간소화합니다.

2) 캐싱 및 데이터 동기화

TanStack Query는 데이터를 자동으로 캐싱하고, 필요할 때 데이터를 자동 갱신합니다. 이를 통해 네트워크 요청을 최소화하고, 최신 데이터를 유지할 수 있습니다.

3) 선언형 API 제공

TanStack Query는 선언형으로 동작합니다. 이를 통해 간결하고 가독성 높은 코드를 작성할 수 있습니다.

4) 자동화된 기능

• 자동 재시도: 요청 실패 시 자동으로 재시도합니다.
• 백그라운드 갱신: 데이터가 최신 상태인지 확인하고, 필요 시 갱신합니다.
• Stale-While-Revalidate(SWR) 패턴 지원: 오래된 데이터를 표시하면서도 새 데이터를 백그라운드에서 가져옵니다.

5) DevTools 지원

TanStack Query DevTools를 사용하면 요청 상태, 캐싱 데이터, 쿼리 성능을 실시간으로 확인할 수 있어 디버깅이 용이합니다.

---

3. TanStack Query의 주요 기능

1) 데이터 가져오기 (Fetching)

TanStack Query를 사용하면 서버 데이터를 가져오는 로직을 간단히 작성할 수 있습니다.

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

const fetchPosts = async () => {
  const { data } = await axios.get('/api/posts');
  return data;
};

function Posts() {
  const { data, isLoading, error } = useQuery(['posts'], fetchPosts);

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

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

2) 데이터 갱신 (Mutations)

데이터를 수정하거나 추가할 때도 간단한 API를 제공합니다.

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

const addPost = async (newPost) => {
  const { data } = await axios.post('/api/posts', newPost);
  return data;
};

function AddPost() {
  const queryClient = useQueryClient();
  const mutation = useMutation(addPost, {
    onSuccess: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });

  const handleSubmit = () => {
    mutation.mutate({ title: 'New Post' });
  };

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

3) DevTools 사용

React 개발 환경에서 DevTools를 설치하여 쿼리 상태를 실시간으로 확인할 수 있습니다.

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyApp />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

---

4. TanStack Query의 활용 사례

1) 데이터 캐싱이 중요한 애플리케이션

예: 전자상거래 사이트에서 상품 목록을 캐싱하여 사용자 경험을 향상시킴.

2) 비동기 데이터 요청이 많은 애플리케이션

예: 소셜 미디어 앱에서 게시물, 댓글, 사용자 데이터를 효율적으로 관리.

3) 실시간 데이터 동기화가 필요한 애플리케이션

예: 대시보드에서 실시간 데이터를 표시하는 경우.

---

5. TanStack Query를 사용할 때 주의할 점

1. 브라우저 지원: 일부 오래된 브라우저에서는 제대로 동작하지 않을 수 있습니다.
2. 추가 학습 필요: 초기에 API와 패턴을 이해하는 데 시간이 필요할 수 있습니다.
3. 전역 상태와의 혼합 사용: 로컬 상태 관리 도구(Recoil, Zustand 등)와 함께 사용할 때 적절히 역할을 분리해야 합니다.

---

6. 결론

TanStack Query는 서버 상태 관리를 혁신적으로 간소화한 도구입니다. 선언형 API, 자동화된 기능, 강력한 DevTools 지원 등은 React 개발자가 더 효율적으로 일할 수 있도록 돕습니다.

React 프로젝트에서 서버 데이터를 다룰 일이 많다면, TanStack Query를 도입하여 코드의 복잡성을 줄이고 사용자 경험을 향상시켜 보세요!