TanStack Query를 사용한 서버 상태 관리

 

React 애플리케이션에서 서버 상태를 관리하는 것은 복잡한 작업일 수 있습니다.

이를 간단하고 효율적으로 처리하기 위해 TanStack Query(이전의 React Query)를 사용할 수 있습니다.

이 글에서는 TanStack Query의 기본 개념과 사용 예제를 통해 서버 상태 관리를 쉽게 하는 방법을 설명하겠습니다.

 

TanStack Query란?

TanStack Query는 서버 상태를 효율적으로 관리할 수 있도록 도와주는 React 라이브러리입니다. 서버에서 데이터를 가져오고, 캐시하고, 업데이트하는 등의 작업을 자동화하여 개발자가 서버와 클라이언트 간의 데이터 동기화 문제를 쉽게 해결할 수 있습니다.

 

TanStack Query의 주요 기능

1. 데이터 페칭과 캐싱: 서버에서 데이터를 가져오고, 이를 클라이언트에 캐싱하여 불필요한 네트워크 요청을 줄입니다.
2. 자동 재요청: 데이터가 변경되거나 특정 조건이 충족되면 자동으로 데이터를 재요청합니다.
3. 백그라운드 업데이트: 데이터가 백그라운드에서 업데이트되어 사용자 경험을 향상시킵니다.
4. 쿼리 취소: 불필요한 네트워크 요청을 취소할 수 있습니다.
5. 오프라인 지원: 네트워크 연결이 없을 때도 데이터를 사용할 수 있습니다.

 

TanStack Query 설치

먼저, TanStack Query를 프로젝트에 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

npm install @tanstack/react-query

 

 

사용 예제

다음은 TanStack Query를 사용하여 데이터를 페칭하는 간단한 예제입니다. 이 예제에서는 JSONPlaceholder API를 사용하여 사용자 데이터를 가져옵니다.

1. React Query 클라이언트 설정

// src/queryClient.js
import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

export default queryClient;

 

 

2. React 애플리케이션에 QueryClientProvider 추가

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClientProvider } from '@tanstack/react-query';
import App from './App';
import queryClient from './queryClient';

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

 

 

3. 데이터 페칭을 위한 커스텀 훅 작성

// src/hooks/useUsers.js
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

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

const useUsers = () => {
  return useQuery(['users'], fetchUsers);
};

export default useUsers;

 

 

4. 컴포넌트에서 데이터 사용

// src/App.js
import React from 'react';
import useUsers from './hooks/useUsers';

const App = () => {
  const { data, error, isLoading } = useUsers();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

 

 

결론

TanStack Query는 서버 상태 관리를 단순화하고, React 애플리케이션에서 데이터 페칭 및 캐싱을 효율적으로 처리할 수 있도록 도와줍니다.