React Query(Tanstack Query)

---

🔎 React Query(Tanstack Query)란?

정의

React Query(Tanstack Query)는 React 애플리케이션에서 서버 상태를 조회, 캐싱, 동기화하기 위한 라이브러리다.

클라이언트 상태와 서버 상태를 분리해서 다루기 좋고, API 요청과 캐시 관리를 단순하게 만들어 준다.

🧩 주요 특징

• 서버 응답을 자동으로 캐싱한다.
• 로딩, 에러, 재시도 상태를 쉽게 다룰 수 있다.
• 데이터가 오래되면 자동으로 다시 가져올 수 있다.
• queryKey를 기준으로 데이터를 구분한다.
• 서버 상태 동기화에 유리하다.

🛠️ 설치

npm install @tanstack/react-query

⚙️ 기본 설정

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

const queryClient = new QueryClient();

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

🧪 useQuery 예제

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

const fetchUser = async () => {
  const response = await fetch("https://api.example.com/user");
  if (!response.ok) {
    throw new Error("사용자 정보를 가져오지 못했습니다.");
  }
  return response.json();
};

function UserComponent() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["user"],
    queryFn: fetchUser,
  });

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

  return <p>User: {data.name}</p>;
}

🧪 useMutation 예제

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

const updateUser = async (userData) => {
  const response = await fetch("https://api.example.com/user", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(userData),
  });

  if (!response.ok) {
    throw new Error("사용자 정보를 수정하지 못했습니다.");
  }

  return response.json();
};

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

  const mutation = useMutation({
    mutationFn: updateUser,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user"] });
    },
  });

  return (
    <button onClick={() => mutation.mutate({ name: "New Name" })}>
      Update User
    </button>
  );
}

⚖️ 장점과 단점

장점

• API 응답을 자동으로 캐싱해 불필요한 요청을 줄인다.
• 로딩과 에러 상태를 구조적으로 관리할 수 있다.
• 서버 상태 동기화가 쉬워진다.

단점

• 기본 상태 관리보다 개념이 조금 더 많다.
• 작은 프로젝트에서는 오히려 과할 수 있다.

📌 정리

• React Query는 서버 상태 관리에 특화된 라이브러리다.
• queryKey, useQuery, useMutation, invalidateQueries를 함께 이해하면 좋다.
• API 호출이 많은 React 프로젝트에서 특히 유용하다.

---

연결문서

• React-axios
• useEffect
• Recoil