useQuery (get)

useQuery – 데이터 가져오기

서버 데이터를 가져올 때 사용

캐싱, 로딩, 에러 처리를 자동으로 관리

사용법


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

// 서버에서 데이터 가져오는 함수
const fetchReservations = async () => {
  const { data } = await axios.get('/api/reservations');
  return data;
};

const ReservationList = () => {
  const { data, isLoading, error } = useQuery(['reservations'], fetchReservations);

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

  return (
    <ul>
      {data.map((reservation) => (
        <li key={reservation.id}>Room {reservation.roomNumber}</li>
      ))}
    </ul>
  );
};

옵션들 (유용한 설정 예시)


useQuery(['reservations'], fetchReservations, {
  staleTime: 1000 * 60 * 5,  // 5분 동안 캐시된 데이터를 사용
  refetchOnWindowFocus: false,  // 창 포커스 시 자동 리페칭 비활성화
});

Query 함수를 사용해서 데이터를 가져오고 캐싱할 수 있음.

Query 함수는 데이터 패칭용으로 사용되며, 보통은 GET으로 받아오는 대부분의 API에서 useQuery() 함수를 사용

가장 기본적인 형태의 useQuery 요청 형태는 다음과 같음

const { data } = useQuery(
	queryKey,
	queryFunction,
	options,
)

첫번째 인자는

Query Key로 응답 데이터의 Unique key . 응답 데이터를 캐싱할 때 사용

두번째 인자는

Query Function으로 Promise를 반환하는 함수. 이 쿼리 요청을 수행하기 위한 fetch, axios등의 함수를 의미

세번째 인자는

useQuery에 사용되는 옵션을 지정하는 객체

useQuery를 실행하면 다양한 리턴값을 받을 수 있는데, 그 중 자주 사용하는 것

data : 마지막으로 성공한 데이터 (Response)

error : 에러가 발생했을 때 반환되는 객체

isFetching, isLoading, isSuccess 등 : 현재 Query의 상태

refetch : 해당 Query를 refetch 하는 함수


import { useQuery } from 'react-query';

// 데이터 패칭 함수 
const getUserData(userId) = () => {
  return fetch(`/api/user/${userId}`).then((response) => response.json());
}

const UserProfile = ({ userId }) => {
	// useQuery 를 사용하여 데이터를 가져옵니다. ['user', userId] 는 쿼리 키를 의미합니다.
  const { data, isError, error, isLoading } = useQuery(['user', userId], () => fetchUserData(userId));

  if (isLoading) { // isLoading을 사용하여 데이터가 로딩중일 때 화면을 랜더링합니다.
    return <div>Loading...</div>;
  }

  if (isError) { // isError를 사용하여 error가 발생할 때 화면을 랜더링합니다.
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {data.name}</p>
      <p>Email: {data.email}</p>
    </div>
  );
}