useQuery

🔥 쿼리란?

백엔드로부터 데이터를 받아오기 위해 우리는 리액트 쿼리에서 제공하는 useQuery()라는 훅을 사용할 겁니다. 여기서 쿼리란 '문의하다, 질문하다'라는 뜻을 가지고 있는 단어인데요. 데이터베이스 같은 것에 우리가 필요한 데이터를 요청하는 것을 말합니다.

즉, useQuery()는 필요한 데이터를 백엔드에 요청해서 받아 오는 React Hook이죠.

✅ useQuery()로 데이터 받아오기

1. 그럼 먼저 백엔드에서 데이터를 받아 올 함수부터 만들어보겠습니다.
   api.js 라는 파일을 만들어 다음과 같이 코드를 추가해 줍시다. getPosts()라는 함수는 백엔드로부터 모든 포스트 목록을 받아오는 함수입니다

//src/api.js
const BASE_URL = 'https://learn.codeit.kr/api/codestudit';

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

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

// src/HomePage.js 
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() 훅의 리턴 값에는 뭔가 굉장히 많은 것들이 있는데요. 우리가 앞으로 자주 사용할 몇 가지만 가볍게 살펴봅시다.

1. 데이터

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

2. 데이터를 받아온 시간

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

3. 다양한 상태 정보

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

그 외에도 fetchStatus, isStale, isPlaceholderData 등등 아직은 잘 모르는 값들이 많은데요. 앞으로 하나씩 차근차근 알아보도록 합시다.