React Query 에 대해서 블로그를 작성해본다!! 🔥🔥🔥

useQuery

---

리액트쿼리 라이브리에서 쿼리 훅을 사용하여 백엔드 측에 필요한 데이터를 받아올 수 있다. 바로 useQuery 훅을 사용하면 된다.

간단한 예제를 통해 알아보자

api.js

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

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

유저 목록을 받아오는 api.js 파일이다.

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 값

---

useQuery 값 안에는 다양한 값들이 들어있다. 자주 사용하는 값을 설명해보자면

데이터

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

데이터를 받아온 시간

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

다양한 상태정보

isError, isFetched, isPending, isPaused, isSuccess와 같은 다양한 상태 정보도 들어있다.

Status

---

React Query 에는 두 가지의 Status가 존재한다.
1. 실제로 받아온 data 의 값이 있는지 없는지 나타내는 상태
2. queryFn() 함수가 현재 실행되는지 아닌지 나타내는 상태
이 두가지의 상태를 Query Status , Fetch Status 라 부른다.

Query Status

---

세 가지 상태 값을 갖고있다. pending, success, error 의 상태값 중 하나를 가지게 되는데

pending

아직 데이터를 받아오지 못한 상태

error

데이터를 받아오는 도중 에러가 발생한 상태

success

데이터를 성공적으로 받아온 상태

위 값은 useQuery 결과값 중 status 값을 통해 확인이 가능하며,
isPending , isError , isSuccess 와 매칭이 된다.

Fetch Status

---

위와 마찬가지 세 가지 상태 값을 갖고 있다. fetching , paused , idle 의 상태값 중 하나를 가지게 된다.

fetching

현재 쿼리 함수가 실행되는 상태

paused

쿼리 함수가 시작했으나 실제로 실행되지 않고 있는 상태
ex) 네트워크가 오프라인 상태

idle

쿼리 함수가 어떤 작업도 하고 있지 않은 상태

fetchStatus 값을 통해 확인할 수 있으며, queryFn 으로 등록했을때, 쿼리 함수의 실행 상태를 말해주는 값이 fetch Status 라고 말할 수 있다.