React useQuery

1. React useQuery

React Query에서 제공하는 훅으로, 서버에서 데이터를 가져오고 이를 관리하는 강력한 도구이다. 비동기 데이터 패칭, 캐싱, 업데이트, 에러 핸들링 등을 간편하게 처리할 수 있다.

 

1-1. 주요 특징

• 비동기 데이터 패칭
  • 데이터를 서버에서 가져오기 위해 사용된다. 내부적으로 데이터를 자동으로 가져오고 캐싱한다.
• 캐싱 및 데이터 일관성
  • 같은 키(queryKey)로 요청하면 이미 캐싱된 데이터를 사용하고, 필요 시 다시 패칭한다.
• 자동 갱신 및 리패치
  • 데이터를 갱신하거나 특정 조건에서 자동으로 다시 요청한다.
• 로딩 및 에러 상태 관리
  • 데이터 로드 상태, 에러 발생 여부를 간단하게 확인할 수 있다.

 

1-2. 기본 사용법

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

function ExampleComponent() {
  const fetchData = async () => {
    const response = await axios.get('/api/data');
    return response.data;
  };

  const { data, isLoading, error } = useQuery(['dataKey'], fetchData);

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

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

 

 

2. 주요 옵션

useQuery는 다음과 같은 옵션을 지원한다.

2-1.  queryKey(필수)

• 요청을 식별하는 고유 키이다. 배열 형태로 작성하여 유연하게 관리한다.
• 예: ['user', userId]

2-2. queryFn(필수)

• 데이터를 가져오는 함수이다. 비동기 함수로 작성해야 한다.

2-3. enabled

• true일 때만 쿼리를 실행한다. 특정 조건에서 데이터를 패칭하고 싶을 때 유용하다.
• 예: enabled: !!userId

2-4. staleTime

• 데이터가 Fresh 상태로 간주되는 시간을 설정한다. Fresh 상태에서는 동일한 쿼리가 다시 실행되더라도 서버 요청 없이 캐시 데이터를 반환한다.
• 기본값: 0

useQuery(['key'], fetchData, { staleTime: 10000 }); // 10초 동안 Fresh 상태 유지

2-5.  cacheTime

• 캐시 데이터를 유지하는 시간(ms), 캐시 만료 후에는 데이터가 삭제된다.
• 기본값: 5분(300,000ms)

useQuery(['key'], fetchData, { cacheTime: 60000 }); // 1분 동안 캐시 유지

 

반환 값에 Fresh와 Stale 상태

1. Fresh 상태

• 쿼리 실행 직후 staleTime이 설정된 시간 동안 데이터가 신선하다고 간주된다.
• 이때 동일한 쿼리가 실행되면 서버 요청 없이 캐시 데이터를 반환한다.

2. Stale 상태

• staleTime이 지난 이후 데이터는 Stale 상태로 간주된다.
• 동일한 쿼리가 실행되면 우선 캐시 데이터를 반환하고, 동시에 서버에 새 데이터를 요청한다.
• 서버 요청 완료 후 새로운 데이터를 캐시를 업데이트하고, 컴포넌트를 다시 렌더링한다.

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

function ExampleComponent() {
  const fetchData = async () => {
    const response = await axios.get('/api/data');
    return response.data;
  };

  const { data, isLoading, error, isFetching } = useQuery(
    ['dataKey'],
    fetchData,
    {
      staleTime: 10000, // 10초 동안 Fresh 상태 유지
      cacheTime: 300000, // 5분 동안 캐시 데이터 유지
    }
  );

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

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      {isFetching && <p>Refreshing data...</p>}
    </div>
  );
}

 

캐시 내용 요약

캐싱 관련 설정은 staleTime과 cacheTime 옵션으로 처리된다

• staleTime: Fresh 상태 유지 시간 (서버 요청 최소화)
• cacheTime: 캐시 데이터를 삭제하기 전까지 유지하는 시간 (효율적인 메모리 관리)

 

2-6. refetchOnWindowFocus

• 사용자가 브라우저를 다시 활성화할 때 데이터를 다시 가져올 지 설정한다.
• 기본값: true

 

3. 반환 값

useQuery는 다음 데이터를 반환한다.

• data : 패칭된 데이터
• isLoading: 데이터가 로딩 중인지 확인
• error: 요청 실패 시 발생한 에러 객체
• isFetching: 백그라운드에서 데이터를 다시 가져오는 중인지 확인
• refetch: 데이터를 수동으로 다시 가져오는 함수

 

4. 고급 기능

1. 무한 스크롤

• useInfiniteQuery를 사용하여 구현

2. Mutation 관리

• 데이터를 변경하는 작업(예: POST, PUT, DELETE)는 useMutation으로 처리

3. Devtools 지원

• React Query Devtools를 통해 상태를 시각적으로 관리

6. 사용 이유

• 코드 간소화: 상태관리, 비동기 로직 분리
• 캐싱: 불필요한 네트워크 요청 감소
• 확장성: 다양한 옵션으로 유연하게 데이터 관리