[React] React Query 사용법 | 데이터 캐싱과 리페칭 쉽게 정리

React Query란?

React Query는 React 애플리케이션에서 서버 상태(데이터)를 효율적으로 관리하기 위한 데이터 패칭 라이브러리이다. API로부터 데이터를 가져오고, 캐싱하고, 업데이트하며, 동기화하는 작업을 간편하게 만들어 준다. 서버와 클라이언트 간의 데이터 통신을 효율적으로 관리하여 사용자 경험을 개선할 수 있다.

---

✅ React Query, 왜 사용해야 할까?

1. 자동 캐싱과 데이터 동기화
   • 데이터를 자동으로 캐싱하고, 필요한 경우에만 서버로부터 데이터를 다시 가져온다.
   • 백그라운드에서 데이터를 자동으로 동기화하여 최신 상태를 유지할 수 있다.
2. 서버 상태 관리 간소화
   • API 호출, 로딩 상태, 에러 처리 등을 직접 관리할 필요 없이 간편하게 처리할 수 있다.
3. 편리한 리페칭(Refetching)
   • 특정 조건(시간, 포커스, 네트워크 상태 등)에 따라 데이터를 자동으로 다시 가져올 수 있다.
4. 개발 생산성 향상
   • 적은 코드로 안정적이고 효율적인 데이터 관리를 할 수 있어 개발 생산성이 향상된다.
5. React와 완벽한 호환성
   • React의 훅(Hooks) 시스템을 활용하여 자연스럽게 사용할 수 있다.

---

🛠️ 설치 방법

 

npm install @tanstack/react-query
또는
yarn add @tanstack/react-query

---

⚙️ 기본 설정

React Query를 사용하려면 QueryClient와 QueryClientProvider로 애플리케이션을 감싸주어야 한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

const queryClient = new QueryClient();

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

---

🔄 데이터 가져오기 (useQuery)

useQuery 훅을 사용하여 API로부터 데이터를 가져올 수 있다.

 

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

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

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

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error occurred!</p>;

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

---

🔄 데이터 변형 (useMutation)

useMutation은 데이터를 생성, 수정, 삭제하는 등의 작업에 사용된다.

 

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

const addPost = async (newPost) => {
  const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
  return data;
};

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

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

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

---

⚡️ 자동 리페칭과 캐싱 설정

const { data, isLoading } = useQuery(['posts'], fetchPosts, {
  refetchOnWindowFocus: true,
  staleTime: 1000 * 60 * 5,
  cacheTime: 1000 * 60 * 10,
});

• refetchOnWindowFocus: 창이 포커스될 때 데이터를 자동으로 다시 가져온다.
• staleTime: 지정한 시간 동안 데이터를 "신선"하다고 간주하여 리페칭을 하지 않는다.
• cacheTime: 캐시가 유지되는 시간이다.

---

⚙️ 전역 에러 처리 및 로딩 처리

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      refetchOnWindowFocus: false,
    },
  },
});

• retry: 실패 시 몇 번 재시도할지 설정한다.
• refetchOnWindowFocus: 창에 포커스될 때 리페칭 여부를 설정한다.

---

📚 React Query Devtools 사용하기

React Query Devtools를 사용하면 쿼리 상태를 시각적으로 쉽게 확인할 수 있다.

설치

npm install @tanstack/react-query-devtools

사용 방법

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

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

---

📖 결론

React Query는 서버 상태를 효율적으로 관리할 수 있게 해주는 강력한 도구이다. 자동 캐싱, 리페칭, 데이터 변형, 에러 관리 등 다양한 기능을 제공하여 복잡한 서버 상태 관리를 간소화할 수 있다. 특히, 빠르고 간편하게 API 데이터를 관리하고 싶은 React 개발자에게 필수적인 라이브러리이다.