React Query

최종 수정일 : 2024-07-21

React Query

1. 상태 관리를 하는 데이터는 두 가지로 나뉜다.

A. 클라이언트 상태 데이터

웹사이트의 어떤 메뉴가 열렸는지 닫혔는지, 혹은 사용자가 어떤 버튼을 눌렀는지 아닌지와 같은 UI 상태 값이나, 유저가 입력 폼에 입력한 데이터 등 서버와는 상관없이 웹 브라우저 안에서만 사용하는 데이터

 

B. 서버 상태 데이터

가능한 한 최신 상태로 유지되어야 한다.
데이터를 받아온느 중에는 어떤 화면을 보여줄 것인지, 로딩과 에러 상황은 어떻게 알 수 있는지, 서버로부터 받아 온 데이터들은 어떻게 관리할지, 데이터를 주기적으로 받아오려면 어떤 식으로 구현해야 할지 등등 여러 가지를 고려해야 한다.

 

흔히 알려진 상태 관리 라이브러리들은 클라이언트 상태 데이터들을 잘 관리하기 위해 나온 터라, 서버 상태 데이터를 관리하기에는 잘 맞지 않는 부분도 있고, 코드가 복잡해지는 문제가 있다. 그래서 이를 해결하기 위해 서버 상태 데이터만을 집중적으로 관리하는 리액트 쿼리가 등장했다.

 

React Query(리액트 쿼리)는 게이터를 가져오는 과정에서 로딩과 에러 처리를 쉽게 구현할 수 있도록 여러 값을 제공해 주고, 정해진 시간 혹은 조건마다 서버 상태 데이터를 최신으로 가져오는 작업을 알아서 해준다. 뿐만 아니라 캐시(cache)라는 걸 사용해서 매번 서버에서 데이터를 가져올 필요 없이 유저에게 더 바르게 데이터를 보여주기도 한다.

---

2. 설치

npm install @tanstack/react-query

npm install @tanstack/react-query-devtools

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import HomePage from './HomePage';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <HomePage />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;

initialIsOpen은 리액트 쿼리 개발자 도구가 열려있는 채로 실행할 것인가를 선택하는 옵션이다.

---

3. useQuery()

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

 

리턴 값 살펴보기

데이터(data)

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

 

데이터를 받아온 시간(dateUpdatedAt)

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

 

다양한 상태 정보

isError isFetched, isPending, isPaused, isSuccess와 같은 다양한 상태 정보를 확인할 수 있다.

---

4. QueryStatus

리액트 쿼리에는 두 가지 status가 있다.

A. query status

실제로 받아온 data 값이 있는지 여부를 나타내는 상태 값(pending, success, error)를 갖는다.

• pending : 아직 데이터를 받아오지 못했음을 의미
• error : 데이터를 받아오는 중에 에러가 발생했음을 의미
• success : 데이터를 성공적으로 받아왔음을 의미

이 상태 값들은 각각 isPending, isError, isSuccess와 매칭이 된다.

 

B. fetch status

queryFn() 함수가 현재 실행되는 중인지 여부를 나타내는 상태 값(fetching, paused, idle)을 갖는다. useQuery()를 사용할 떄 쿼리 함수라는 것을 queryFn으로 등록해 준 쿼리 함수의 실행 상태를 말해준다.

• fetching : 현재 쿼리 함수가 실행되는 중일 때
• paused : 쿼리 함수가 시작은 했는데 실제로 실행되고 있지 않을 때
• idle : 쿼리 함수가 어떤 작업도 하고 있지 않을 때