<aside> 💡 useQuery를 알아보자!!

</aside>

useQuery

useQuery 를 이용해서 상태 데이터를 받아올 수 있다. 백엔드 측에서 필요한 데이터를 받아올 때 useQuery 훅을 사용하면 된다.

간단한 예제를 통해 알아보자 유저 목록을 받아오는 api.js 파일을 만들어준다.

// api.js

const BASE_URL = '<https://jsonplaceholder.typicode.com>';

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

HomePage 컴포넌트에서 useQuery 를 import 하여 실행할 수 있다.

// HomePage.js

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

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

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

export default HomePage;

useQuery 리턴 값

useQuery 의 안에는 다양한 값들이 들어있다. 자주 사용할 몇가지를 설명해보자면

data

백엔드 측에서 받아온 데이터들이 들어 있다.

dataUpdatedAt

현재의 데이터를 받아온 시간을 나타낸다. 이 시간을 기준으로 언제 데이터를 refetch 할 것인지 결정한다.

다양한 상태정보