[TanStackQuery] query, useQuery란? [7/24 study]

 

 

query, useQuery란?

 

 

 

 

쿼리란?

리액트 쿼리를 이용해 백엔드로부터 데이터를 받아오는 방법을 공부 했습니다.

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

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

 

useQuery()

사용법

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;

 

['posts']라는 쿼리 키로 우리가 받아 온 포스트 데이터가 캐시에 저장되어 있는 것을 볼 수 있습니다.

useQuery()는 먼저 전달받은 쿼리 키로 캐시에 저장된 데이터가 있는지 확인합니다. 

만약 저장되어 있는 데이터가 없으면 쿼리 함수를 실행해 데이터를 백엔드로부터 받아오고 그런 다음에 쿼리 키, 여기서는 ['posts']라는 키로 데이터를 캐시에 저장합니다.

 

쿼리 상태

리액트 쿼리는 백엔드에서 이제 막 데이터를 받아와 캐시에 저장된 데이터는 fresh, 즉 신선한 상태로 판단합니다. 

그러다가 stale time이라고 불리는 특정 시간이 지나면 데이터는 stale, 즉 신선하지 않은 상태가 됩니다.

 마지막으로 컴포넌트가 언마운트되면(DOM 트리에서 제거되면) 해당 데이터가 쓰이지 않는 상태가 되어서 데이터는 inactive 상태가 됩니다. 이미 ['posts']라는 쿼리 키로 저장된 데이터가 있는 경우, useQuery는 캐시에 저장되어 있는 데이터를 리턴합니다. 만약 데이터가 fresh 상태라면 캐시에 저장된 데이터를 리턴하고 끝이지만, 데이터가 stale 상태라면 백그라운드에서 refetch를 진행합니다.

그리고 백엔드에서 새로 받아 온 데이터로 기존의 ['posts']로 저장되어 있는 데이터를 갱신합니다.

데이터가 stale 상태라면 리액트 쿼리는 기본적으로 다음 네 가지 상황에서 refetch를 진행하게 되는데요.

새로운 쿼리 인스턴스가 마운트 되거나, 브라우저 창에 다시 포커스가 가거나, 네트워크가 다시 연결되거나, 혹은 미리 설정해 둔 refetch interval 시간이 지났을 때 refetch를 하게 됩니다. 이를 변경하고 싶다면 각각 refetchOnMount, refetchOnWindowFocus, refetchOnReconnect, refetchInterval 옵션을 변경하면 됩니다.

 

 

useQuery의 리턴값?

몇 가지의 리턴값을 살펴 보겠습니다.

 

- data

data에는 우리가 백엔드에서 받아온 데이터들이 들어 있습니다. 

위의 사진를 보시면 response body로 받은 데이터가 객체로 되어 있고, 페이지네이션에 필요한 정보들과 함께 results란 항목에 실제 포스트 데이터가 배열로 들어가 있는 것을 볼 수 있습니다.

 

- dataUpdatedAt

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

 

- status

status라는 항목에는 success라고 적혀있는 걸 보니 데이터를 성공적으로 받아왔다는 뜻인 것 같습니다.