React Query를 사용하는 이유

React Query 사용 방법을 잊지 않기 위해 쓴 글입니다. React Query를 왜 사용하는지 간략히 설명합니다.

React Query를 사용하는 경우에 어떤 장점이 있는지 좀 더 자세히 살펴보려고 합니다.

캐싱과 자동 리프레시

React Query는 데이터를 캐싱하고 자동으로 리프레시하여 최신 정보를 유지합니다. 기본적으로 캐시된 데이터는 새로운 요청이 들어오기 전까지 유효합니다. 이후에는 옵션 설정으로 자동으로 서버로부터 데이터를 다시 가져와 갱신할 수도 있습니다.

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('API_URL');
  return response.json();
};

const MyComponent = () => {
  const { data, isLoading, error } = useQuery('myData', fetchData, {
    refetchInterval: 5000, // 5초마다 데이터 자동 리프레시 설정
  });

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      {/* 데이터 사용 */}
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

위 예시에서는 useQuery 훅에 refetchInterval 옵션을 설정하여 5초마다 데이터를 자동으로 리프레시하도록 했습니다.(useMutation을 사용하면 캐시된 데이터를 무효화하고 최신 데이터를 보여줄 수 있음)

오류 처리

React Query는 오류 처리 기능을 제공하여 안정성을 높입니다. 오류가 발생했을 때 해당 정보를 쉽게 확인하고, 재시도를 시도하거나 적절한 메시지를 사용자에게 보여줄 수 있습니다.

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('API_URL');
  if (!response.ok) {
    throw new Error('데이터를 불러올 수 없습니다.');
  }
  return response.json();
};

const MyComponent = () => {
  const { data, isLoading, error, refetch } = useQuery('myData', fetchData);

  const handleRetry = () => {
    refetch();
  };

  if (isLoading) {
    return <p>Loading...</p>;
  }
  
// 에러가 발생하는 경우 Refetch할 수 있도록 처리
  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={handleRetry}>다시 시도</button>
      </div>
    );
  }

  return (
    <div>
      {/* 데이터 사용 */}
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

위 예시에서는 fetch 함수에서 응답이 성공적이지 않으면 오류를 throw하여 오류 처리합니다. 그리고 오류가 발생했을 때 재시도 버튼을 클릭하여 다시 데이터를 가져올 수 있도록 합니다.

데이터 페칭 로직 분리

React Query를 사용하면 데이터 페칭 로직을 컴포넌트 외부로 분리하여 코드를 깔끔하고 관리하기 쉽게 만들 수 있습니다.

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('API_URL');
  return response.json();
};

// 데이터 페칭 로직을 분리하여 사용 가능한 함수로 정의
const useMyData = () => {
  return useQuery('myData', fetchData);
};

const MyComponent = () => {
  const { data, isLoading, error } = useMyData();

  // ...
};

위 예시에서는 useQuery로 데이터를 가져오는 로직을 useMyData라는 커스텀 훅으로 분리합니다. 그리고 MyComponent에서는 useMyData 훅을 사용하여 데이터를 가져옵니다.

마무리

React Query를 사용하는 이유에 대해서 알아보았습니다. 캐싱과 자동 리프레시를 통해 최신 정보를 유지하고, 오류 처리를 통해 안정성을 높이며, 데이터 페칭 로직을 분리하여 코드를 깔끔하게 관리할 수 있습니다. 이러한 장점들은 React 애플리케이션 개발을 더욱 효율적으로 만들어준다고 생각합니다.
앞으로도 React Query를 다양한 상황에서 유용하게 활용하여 멋진 React 애플리케이션을 만들어나가는 개발자가 되고 싶습니다.