쿼리란?

백엔드로부터 데이터를 받아오기 위해 리액트 쿼리에서 제공하는 useQuery()라는 훅을 사용할 것이다.

여기서 쿼리란 '문의하다, 질문하다'라는 뜻을 지니고 있다.
데이터베이스 같은 것에 우리가 필요한 데이터를 요청하는 것을 말한다.
useQuery()는 필요한 데이터를 백엔드에 요청해서 받아오는 React Hook이다.

useQuery()

백엔드에서 데이터를 받아올 함수를 만들었다.
src폴더 안에 data라는 폴더를 만든 후 api.js라는 파일을 만들었다.

const BASE_URL = ' API 요청을 보낼 기본 URL';

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

getPosts()라는 함수는 백엔드로부터 모든 포스트 목록을 받아오는 함수이다.

HomePage컴포넌트에서는 useQuery()를 import한 다음 실행한다.
그런 다음 그 결과를 콘솔에 출력해 보겠다.

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() 리턴 값 살펴보기

useQuery()훅의 리턴 값에는 뭔가 굉장히 많은 것들이 있다.

이 중 자주 사용할 몇 가지를 살펴보자면,

데이터

data에는 백엔드에서 받아온 데이터들이 있다.
위의 예시를 보면, 리스폰스 바디로 받은 데이터가 객체로 되어 있고, 페이지네이션에 필요한 정보들과 함께 results란 항목에 실제 포스트 데이터가 배열로 들어가 있는 것을 볼 수 있다.

데이터를 받아온 시간

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

다양한 상태 정보

그 다음에 isError,isFetched,isPending, isPaused, isSuccess와 같은 다양한 상태 정보도 확인해 볼 수 있다.
status라는 항목에는 success라고 적혀있는 걸 보아 데이터를 성공적으로 받아왔다는 뜻이다.