React _ Tanstack react Query

TanStack Query 사용법: 기존 방식에서 더 나은 데이터 관리로

TanStack Query는 React 애플리케이션에서 데이터 패칭과 상태 관리를 더 효율적으로 처리하기 위한 도구다. 이번에는 기존 useEffect와 useState를 사용한 데이터 패칭을 TanStack Query로 교체하는 과정을 알아보고, 이를 활용하는 방법을 정리한다.

---

1. 기존 방식에서 TanStack Query로 전환하기

기존 방식에서는 데이터 패칭과 상태 관리를 위해 useEffect와 useState를 조합하여 사용했을 것이다. 하지만 이 방식은 코드의 복잡도를 증가시키고, 로딩 상태, 에러 처리 등을 별도로 관리해야 하는 번거로움이 있다.

TanStack Query를 도입하면 이런 과정을 단순화할 수 있다. 먼저 데이터를 가져오는 함수를 별도로 작성해보자.

// http.js
export async function fetchEvents() {
  const response = await fetch("http://localhost:3000/events");

  if (!response.ok) {
    const error = new Error("An error occurred while fetching the events");
    error.code = response.status;
    error.info = await response.json();
    throw error;
  }

  const { events } = await response.json();

  return events;
}

이 함수는 이벤트 데이터를 가져오는 역할을 한다. 에러 처리를 포함하여 데이터를 반환하는 구조로 작성되었다.

---

2. useQuery로 데이터 가져오기

TanStack Query의 핵심인 useQuery 훅을 사용하여 데이터를 가져오자. 사용법은 간단하며, 아래와 같이 적용할 수 있다.

import { useQuery } from "@tanstack/react-query";
import { fetchEvents } from "./http";

function EventList() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["events"],
    queryFn: fetchEvents,
  });

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

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

코드 설명

1. queryKey: 데이터를 구분하기 위한 고유한 키다. 배열 형태로 작성해야 한다.
2. queryFn: 데이터를 가져오는 함수다. 위에서 작성한 fetchEvents를 그대로 사용한다.
3. isLoading / isError: 로딩 상태와 에러 상태를 관리하는 변수로, 간단하게 요청 상태를 처리할 수 있다.

---

3. Query Client 설정

TanStack Query를 사용하려면 QueryClient와 QueryClientProvider를 설정해야 한다. 이를 통해 애플리케이션 전역에서 Query 기능을 사용할 수 있다.

Query Client 생성 및 Provider 설정

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

const queryClient = new QueryClient();

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

코드 설명

1. QueryClient 생성: TanStack Query를 사용하는 데 필요한 클라이언트를 생성한다.
2. QueryClientProvider: 생성된 queryClient를 애플리케이션에 제공한다. App 전체를 감싸주어야 모든 컴포넌트에서 Query 기능을 사용할 수 있다.

---

4. 추가적으로 알아두면 좋은 팁

1. Query Key 구조화
   • queryKey는 배열로 작성되며, 여러 레벨의 키를 사용해 데이터를 체계적으로 관리할 수 있다.
   • 예: ["events", userId]는 특정 사용자와 관련된 데이터를 가져올 때 유용하다.
2. Query 옵션
   • staleTime: 데이터가 새 것으로 간주되는 시간을 설정한다.
   • refetchOnWindowFocus: 브라우저 창이 포커스를 받을 때 데이터를 다시 가져올지 설정한다. 기본값은 true다.
3. 에러 경계(Error Boundary)와 통합
   • TanStack Query는 React의 에러 경계와 잘 작동한다. 에러 핸들링이 필요한 경우 이를 활용할 수 있다.
4. Devtools 활용
   • @tanstack/react-query-devtools를 설치하면 Query 상태를 시각적으로 확인할 수 있어 디버깅에 큰 도움이 된다.
   • 설치 후 다음과 같이 Devtools를 추가한다.

     import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
     
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
     

---

이제 TanStack Query를 활용하여 더 깔끔하고 유지보수하기 쉬운 React 애플리케이션을 만들 수 있다. 기존의 번거로운 데이터 패칭 과정을 단순화하고, 효율적인 상태 관리를 구현해 보자.