[React Query] useQuery 필요할 때만 데이터 로드하기

React Query를 사용하여 GET 요청을 처리할 때에는 주로 useQuery를 사용하게 되는데, 이때 아무런 조건 없이 useQuery를 사용하게 되면 기본적으로 컴포넌트가 렌더링 되는 시점에 데이터 가져오기를 시도합니다.

 

하지만 개발을 하다보면  종종 '특정한 이벤트'가 발생했을 때에만 데이터를 가져와야 하는 경우가 있습니다.

이번 글에서는 그 경우 적절하게 처리하는 방법에 대해서 알아보겠습니다.

 

GET 요청에 useMutation을 사용해야 할까?

한 가지 생각해 볼 수 있는 방법은 useMutation을 사용하는 것입니다. 하지만 여기서 고민이 생깁니다.
useMutation으로 GET 요청도 처리할 수 있지만 보통 POST, PUT, DELETE와 같은 '변경 작업'에 적합한 훅입니다.

다행히 React Query는 이러한 요구사항을 해결할 수 있는 옵션을 제공하고 있습니다. 바로 useQuery의 enabled 옵션입니다.

 

enabled 옵션으로 자동 실행 제어하기

React Query의 useQuery는 기본적으로 호출 시 바로 데이터를 가져오지만, enabled 옵션을 사용하면 이 동작을 제어할 수 있습니다. 공식 문서에서는 enabled에 대해 이렇게 설명합니다:

enabled를 false로 설정하면, 쿼리가 자동으로 실행되지 않습니다. 이 옵션은 의존 쿼리(dependent queries)에서도 사용할 수 있습니다.

 

사용 예제

const myCustomQuery = useQuery({
  queryKey: ['myData'],
  queryFn: fetchMyData, // 데이터를 가져오는 함수
  enabled: false,       // 자동 실행 막기
});

 

조건 만족 시 refetch()로 데이터 가져오기

이제, 특정 조건이 만족되었을 때 데이터를 가져오려면 어떻게 해야 할까요?
React Query는 이를 위해 refetch() 메서드를 제공합니다. refetch()는 useQuery의 반환 객체에서 제공되며, 이를 호출하면 데이터를 가져오는 요청을 직접 실행할 수 있습니다.

 

refetch() 예제

const myCustomQuery = useQuery({
  queryKey: ['myData'],
  queryFn: fetchMyData,
  enabled: false, // 자동 실행 막기
});

// 특정 조건에서 refetch 호출
function handleButtonClick() {
  myCustomQuery.refetch();
}

 

이 코드에서는 enabled를 false로 설정해 useQuery의 기본 실행을 막고, 버튼 클릭 같은 특정 조건에서 refetch()를 호출해 데이터를 가져옵니다.

 

refetch()의 옵션

refetch는 다음과 같은 옵션을 받을 수 있습니다.

• throwOnError: 에러가 발생했을 때 예외를 던질지 여부.
• cancelRefetch: 진행 중인 요청을 취소하고 새 요청을 시작할지 여부.

사용 예시

myCustomQuery.refetch({ throwOnError: true, cancelRefetch: false });

 

전체 코드 예제 (버튼 클릭 시 데이터 로딩)

아래는 버튼을 클릭했을 때만 데이터를 가져오도록 설정한 예제입니다:

import React from 'react';
import { useQuery } from 'react-query';

const fetchMyData = async () => {
  const response = await fetch('/api/data');
  if (!response.ok) throw new Error('Failed to fetch data');
  return response.json();
};

const MyComponent = () => {
  const myCustomQuery = useQuery({
    queryKey: ['myData'],
    queryFn: fetchMyData,
    enabled: false, // 자동 실행 막기
  });

  return (
    <div>
      <button onClick={() => myCustomQuery.refetch()}>데이터 가져오기</button>
      {myCustomQuery.isLoading && <p>로딩 중...</p>}
      {myCustomQuery.isError && <p>에러가 발생했습니다.</p>}
      {myCustomQuery.data && <pre>{JSON.stringify(myCustomQuery.data, null, 2)}</pre>}
    </div>
  );
};

 

정리

React Query의 useQuery는 기본적으로 자동으로 데이터를 가져오지만, enabled 옵션과 refetch()를 조합하여 원하는 시점에만 데이터를 가져올 수 있습니다.

1. 자동 실행 방지: enabled: false 옵션 사용
2. 특정 조건에서 실행: refetch() 메서드를 호출

 

 

끝