React Query란?

React Query는 React 애플리케이션에서 서버 상태 관리를 돕는 라이브러리입니다.

서버 상태 관리: 서버로부터 받은 데이터를 효율적으로 관리하는 것

 

🔍 React Query가 제공하는 기능을 살펴봅시다.

1. 데이터 가져오기 (Fetching Data): 서버에서 데이터를 가져오고, 그 데이터를 React 컴포넌트에서 사용할 수 있도록 해줍니다.

2. 캐싱 (Caching): 한 번 서버로부터 받아온 데이터를 임시 저장소에 저장해두고, 같은 요청이 다시 발생했을 때 재사용합니다. 이를 통해 불필요한 서버 요청을 줄이고, 애플리케이션의 성능을 향상시킵니다.

3. 자동 업데이트와 재요청 (Automatic Updates and Refetching): 데이터가 변경되었을 때 자동으로 새로고침하거나, 특정 조건에서 데이터를 다시 가져오도록 설정할 수 있습니다.

4. 데이터 동기화 (Data Synchronization): 여러 컴포넌트에서 같은 데이터를 사용할 때, 그 데이터를 쉽게 동기화할 수 있습니다.

5. 오류 처리 (Error Handling): 데이터 요청 과정에서 발생할 수 있는 오류를 관리하고, 사용자에게 적절한 피드백을 제공할 수 있습니다.

 

🔍React Query를 사용하는 방법을 알아봅시다.

React Query를 사용하기 위해서는 QueryClient 인스턴스를 생성해야 합니다.

이 인스턴스는 애플리케이션 전체에서 사용되며, 서버 상태 관리를 위한 설정을 담고 있습니다.

 

생성한 QueryClient 인스턴스를 애플리케이션의 최상위 컴포넌트에 제공하기 위해
QueryClientProvider 컴포넌트를 사용합니다.

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

// QueryClient 인스턴스 생성
const queryClient = new QueryClient();

function App() {
  return (
    // QueryClientProvider를 사용하여 애플리케이션에 QueryClient 제공
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

 

useQuery 훅을 사용하여 서버로부터 데이터를 가져오고, 그 데이터를 컴포넌트에서 사용할 수 있습니다.

 

import { useQuery } from 'react-query';

function fetchUsers() {
  return fetch('https://your-api.com/users').then(res => res.json());
}

function Users() {
  const { isLoading, error, data } = useQuery('users', fetchUsers);

  if (isLoading) return '로딩 중...';

  if (error) return '오류 발생: ' + error.message;

  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

fetchUser: 서버에서 데이터를 가져오는 API 요청
useQuery 함수를 호출하고, 쿼리의 상태를 반환