☁️ goormTIL | TanStack Query #49

매루·2025년 11월 18일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

47/67

📅 2025-11-18

➡️ TanStack Query에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

🔎 학습 리마인드

📌 TanStack Query

구 React Query. v4부터 Vue나 Svelte 등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되면서 이름이 변경됨

등장 배경

useEffect 기반 방식은 상태 관리와 중복 코드가 많음
Redux 미들웨어는 복잡성과 테스트 부담이 큼
서버 상태(캐싱, 동기화, 재검증)를 효율적으로 다루기 어려움

→ 이를 해결하기 위해 나온 것이 TanStack Query

개념

서버 상태 관리 라이브러리
데이터를 가져오고, 캐싱, 동기화하여 필요한 시점에 무효화까지 자동으로 처리
개발자는 비동기 로직 대신 데이터 상태만 신경 쓰면 됨

주요 기능

캐싱: 같은 데이터를 다시 요청하지 않음
자동 리패칭: 변경 시 자동으로 최신 데이터 반영
무효화(invalidate): 특정 조건에서 다시 데이터 불러올 수 있음

💡 기본 사용법

설치
```
npm i @tanstack/react-query
```

QueryClientProvider 적용

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

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

💡 useQuery

🔗 https://tanstack.com/query/v5/docs/framework/react/reference/useQuery

데이터를 가져올 때 사용
쿼리 키(Query key)와 패칭 함수(비동기 함수)를 인자로 받아 데이터를 가져오고, 로딩 상태/ 오류 상태, 데이터를 반환

기본 구조

const { data, isPending, isError } = useQuery({
  queryKey: ["키값"],
  queryFn: async () => {
    const res = await axios.get("/api/data");
    return res.data;
  },
});

queryKey, queryFn → 필수 인자 값
queryKey
- 배열로 지정해줘야 함
- 쿼리에 대한 고유한 키
queryFn
- Promise를 반환하는 함수를 넣어야 함
- 데이터를 가져오는 실제 함수

주요 return 데이터

data
- 쿼리 함수가 리턴한 Promise에서 resolved된 데이터
isPending
- 로딩 중
- 쿼리가 아직 수행되지 않았고, 캐싱된 데이터가 없을 때 true 반환
isError
- 쿼리 요청 중에 에러가 발생한 경우 true

💡 useMutation

🔗 https://tanstack.com/query/v5/docs/framework/react/reference/useMutation

데이터를 생성(Create), 수정(Update), 삭제(Delete)하는 등의 작업에 사용
성공/실패 시 후 처리가 쉬움

기본 구조

const { mutate, isPending, isError } = useMutation({
  mutationFn: async (payload) => {
    const res = await axios.post("/api/data", payload);
    return res.data;
  },
  onSuccess: () => {
    // 성공했을 때 후처리
  },
  onError: () => {
    // 실패했을 때 처리
  },
});

onSuccess, onError 메서드를 통해 성공, 실패했을 시 response 데이터를 핸들링 할 수 있음

💡 쿼리 무효화 (invalidateQueries)

특정 쿼리를 무효화하여 데이터를 refetch하게 하는 함수
주로 useMutation과 함께 사용하여 데이터가 변경된 후 관련 쿼리를 다시 가져옴
- 데이터가 항상 최신 상태로 유지될 수 있도록

기본 구조

const queryClient = useQueryClient();

const { mutate } = useMutation({
  mutationFn: async (payload) => {
    await axios.post("/api/data", payload);
  },
  onSuccess: () => {
    queryClient.invalidateQueries(["키값"]);
  },
});