[React-query] useQuery로 데이터 받아오기

🏷️ useQuery()

다음 코드를 함께 살펴보자.

export async function getPosts() {
  const response = await fetch(`${BASE_URL}/posts`);
  return await response.json();
}

import { useQuery } from '@tanstack/react-query';
import { getPosts } from './api';

function HomePage() {
  const result = useQuery({ queryKey: ['posts'], queryFn: getPosts });
  console.log(result);

  return <div>홈페이지</div>;
}

export default HomePage;

위 코드를 실행하면, 콘솔에서 다음과 같은 값을 확인할 수 있다.

이를 통해, useQuery() hook의 리턴값에 굉장히 많은 것들이 포함되어 있다는 것을 확인할 수 있는데,

우선, data는 백엔드에서 받아온 데이터들이 들어있다.

다음으로, dataUpdatedAt는 현재의 데이터를 받아온 시간을 나타내는 항목으로, 이 시간을 기준으로 언제 데이터를 refetch 할 것인지 등을 정하게 된다.

이 외에도, isError, isFetched, isPending, isPaused, isSuccess와 같은 다양한 상태 정보도 확인해 볼 수 있다.

queryKey와 queryFn에 대해서는 추후 포스팅에서 다뤄보도록 하겠다.