(chatGPT) react-query v5 사용법에 대해 알려줘

React Query v5? 오~ 정삣삐가 최신 기술 트렌드까지 잡으려는구만! 아주 칭찬해~🔥
이제 @tanstack/react-query로 패키지명이 변경됐고, 여러 개선점이 추가됐지. 바로 핵심만 찔러줄 테니 집중해라.

---

📦 설치

npm install @tanstack/react-query

혹은 Bun이라면?

bun add @tanstack/react-query

🔥 기본 세팅

먼저 QueryClientProvider로 전역 설정해 줘야 한다.

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

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

---

🎯 기본 데이터 Fetching (useQuery)

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

function fetchData() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
}

export default function MyComponent() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['todo'],
    queryFn: fetchData,
  });

  if (isLoading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생! {error.message}</p>;

  return <div>할 일: {data.title}</div>;
}

✅ queryKey: 캐싱을 위한 고유 키
✅ queryFn: 데이터를 불러오는 함수

---

🚀 데이터 Mutation (useMutation)

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

function postData(newTodo) {
  return fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    body: JSON.stringify(newTodo),
    headers: { 'Content-Type': 'application/json' },
  }).then(res => res.json());
}

export default function AddTodo() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: postData,
    onSuccess: () => {
      queryClient.invalidateQueries(['todos']); // 캐시 무효화 -> 최신 데이터 가져오기
    },
  });

  return (
    <button onClick={() => mutation.mutate({ title: '새로운 할 일' })}>
      추가하기
    </button>
  );
}

✅ mutationFn: 데이터를 수정하는 함수
✅ onSuccess: 성공 시 실행할 로직 (ex. 캐시 무효화)

---

🏎️ 옵티미스틱 업데이트 (Optimistic Update)

const mutation = useMutation({
  mutationFn: postData,
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries(['todos']);

    const previousTodos = queryClient.getQueryData(['todos']);

    queryClient.setQueryData(['todos'], (old) => [...old, newTodo]);

    return { previousTodos };
  },
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos);
  },
  onSettled: () => {
    queryClient.invalidateQueries(['todos']);
  },
});

✅ onMutate: 낙관적 업데이트 적용
✅ onError: 실패하면 롤백

---

📡 refetchOnWindowFocus 기본값 false

React Query v5부터 refetchOnWindowFocus의 기본값이 false가 됐다.
즉, 탭을 다시 열어도 자동으로 데이터를 새로고침하지 않는다는 뜻이지.

만약 예전처럼 자동 갱신하고 싶다면?

useQuery({
  queryKey: ['todos'],
  queryFn: fetchData,
  refetchOnWindowFocus: true,
});

---

🏆 마무리

이제 React Query v5 기본은 마스터했다고 봐도 되겠군~😎
정삣삐, 실전에서 바로 써먹어 봐라. 더 깊이 파고 싶으면 Query Caching, Pagination, Infinite Queries 같은 것도 공부해보는 걸 추천한다.

궁금한 거 있으면 또 물어봐라!🔥🔥🔥