React Query란 무엇인가?

React Query는 서버 상태 관리 라이브러리로, 데이터를 효율적으로 가져오고 캐싱, 동기화하는 작업을 돕습니다. 클라이언트 상태 관리와는 달리, 서버에서 데이터를 가져오는 작업을 관리하고, 이러한 작업들을 더 간편하고 최적화된 방식으로 수행할 수 있습니다.

왜 React Query를 사용할까?

1. 데이터 패칭을 쉽게 관리
   React Query는 서버에서 데이터를 가져오는 과정에서 생기는 복잡성을 줄여줍니다. useQuery와 같은 훅을 사용해 데이터를 손쉽게 패칭할 수 있습니다.

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

function fetchUserData() {
  return axios.get('/api/user');
}

function UserComponent() {
  const { data, isLoading, error } = useQuery(['user'], fetchUserData);

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

  return (
    <div>
      <h1>{data?.data?.name}</h1>
      <p>{data?.data?.email}</p>
    </div>
  );
}

2. 자동 캐싱
   동일한 쿼리 요청에 대해 React Query는 자동으로 데이터를 캐싱하고 재사용합니다. 이를 통해 네트워크 요청을 줄이고 성능을 향상시킬 수 있습니다.

3. 백그라운드 데이터 동기화
   데이터를 최신 상태로 유지하기 위해 백그라운드에서 데이터를 동기화하는 기능을 제공합니다. 사용자는 항상 최신 데이터를 보게 됩니다.

4. 에러 및 로딩 상태 관리
   에러와 로딩 상태를 쉽게 관리할 수 있습니다. 이는 사용자에게 더 나은 경험을 제공합니다.

5. 쿼리 무효화 (Invalidation)
   데이터가 변경되면 캐싱된 데이터를 무효화하여 최신 데이터를 가져와야 할 때가 있습니다. React Query에서는 useQuery와 함께 useMutation을 사용하여 데이터 수정 작업을 처리할 수 있습니다.

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

function updateUserData(newData) {
  return axios.post('/api/user/update', newData);
}

function UpdateUserComponent() {
  const queryClient = useQueryClient();
  const mutation = useMutation(updateUserData, {
    onSuccess: () => {
      queryClient.invalidateQueries(['user']);
    },
  });

  const handleUpdate = () => {
    mutation.mutate({ name: '새로운 이름' });
  };

  return (
    <button onClick={handleUpdate}>
      Update User
    </button>
  );
}

리액트 쿼리에서 유용한 옵션들

• staleTime: 데이터가 '오래된' 상태로 간주되기까지의 시간을 설정할 수 있습니다. 이를 통해 불필요한 재패칭을 방지할 수 있습니다.

• cacheTime: 쿼리 데이터를 캐시에 보관하는 시간을 설정합니다. 기본값은 5분입니다.

• retry: 쿼리 실패 시 재시도 횟수를 설정할 수 있습니다. 기본값은 3회입니다.

const { data, error } = useQuery(['user'], fetchUserData, {
  staleTime: 1000 * 60 * 5,  // 5분 동안 데이터가 신선하게 유지
  cacheTime: 1000 * 60 * 10, // 10분 동안 캐시 유지
  retry: 2,                  // 실패 시 2번 재시도
});

결론 🎇

React Query는 서버 상태 관리에서 발생하는 복잡성을 크게 줄여주며, 자동 캐싱, 백그라운드 데이터 동기화, 에러 및 로딩 관리 등의 기능을 제공합니다. 이를 통해 더 나은 사용자 경험을 제공하고 코드의 유지보수성을 높일 수 있습니다.