리액트 쿼리(react query)

리액트 상태는 크게 3가지로 구분된다.

1. 지역: useState로 관리

2. 전역: store로 상태관리

3. 서버: API통신할때 필요한 상태

 

리액트쿼리는 특히 서버상태관리를 하는데 유용한 라이브러리이다.

그러면 리액트쿼리를 사용하기위해 기본세팅하는 방법을 알아보자.

 

1. react query 설치(버전 5로 설치함)

npm i @tanstack/react-query

 

2. index.js 또는 main.jsx에서 import 해주고 기본 세팅하기

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'//import를 해주고

const queryClient = new QueryClient();//QueryClient 인스턴스를 생성해주고
createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>//<App>을 QueryClientProvider로 감싸준다
    <App />
  </QueryClientProvider>,
)

 

3. Devtool을 설치. 이걸 설치하는 이유는 리액트쿼리를 사용하면서 캐시 상태를 보기위한 목적이다.

npm i @tanstack/react-query-devtools

 

4. index.js 또는 main.jsx에 Devtool import 해주기

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

 

 

5. index.js 또는 main.jsx에 Devtool 세팅하기

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient();
createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools initialIsOpen={false} />//QueryClientProvider 안에 넣어주기
  </QueryClientProvider>,
)

 

여기까지가 아주 기본적으로 리액트쿼리를 사용하기위한 기본 세팅이다.

 

리액트 쿼리는 서버 상태를 관리해주는 라이브러리이니까 API를 호출을 해줘야한다.

fetch로도 할 수 있지만 axios라는 좋은게 있으니 이걸로 API를 호출할 것이다.

 

1. axios 설치

npm i axios

 

2. 리액트 쿼리에서 제공하는 대표적인 훅인 useQuery를 사용, 디폴트로 useQuery 훅은 컴포넌트 들어오자마자 실행되는데 나는 어떤 이벤트 뒤에 실행하고 싶다! 하고싶을땐 따로 설정이 필요

import { useQuery } from '@tanstack/react-query'//import 해주고

.
.
.

const {data, isLoading, isError, error} = useQuery({//data: API호출해서 받아온 data, isLoading: 로딩중인지 아닌지 상태값(로딩중이면 true, 아니면 false), isError: 에러가 난 상태값, error: 에러가 났다면 에러 정보가 들어가있는 에러 객체(에러 메세지 등등)
	queryKey: ['todos'], 
	queryFn: getTodos,
	retry: 2
});
//useQuery는 객체 하나를 매개변수로 받는다.(버전 5여서 그런데 다른 버전에서는 매개변수가 3개임)
//첫번째 key는 queryKey로 API 호출하는 이름으로 생각하면 된다. 유니크한 이름이여야 함.
//두번째 key는 queryFn으로 함수이다. API를 호출하는 로직의 함수가 들어감. 이렇게 2개까지가 가장 기본적으로 꼭 들어가야하는 것들
//세번째 key는 retry로 API 호출에 실패했을때 다시 시도하는 횟수이다. 디폴트로 설정해주지 않으면 3번임

const getTodos = () => {
	...//API 호출하는 로직
};

보통 useQuery는 따로 js파일을 만들어서 커스텀훅으로 관리하는 경우가 많다.

위에처럼 쓰면 UI부분과 로직부분이 합쳐져 있어 관리하기가 까다롭다.

 

그럼 이렇게 API 호출하려고 리액트쿼리를 쓰냐?

아니! 리액트 쿼리를 쓰는 진짜 이유는 캐시관리를 해주기 때문
캐시는 임시 저장 공간으로 API를 호출해서 가져온 데이터를 캐시라는 임시저장공간에 잠깐만 가지고 있어 하면서 저장
리액트 쿼리는 모든 데이터를 이 캐시에 저장시켜줌
그래서 이런 경험이 있을 것이다.
어디 사이트를 갔는데 처음 들어갔을 때 데이터 로딩이 되고 두번째로 들어갔을때(데이터가 동일하다는 가정) 로딩 없이 바로 데이터가 나오는 경우!
이 경우가 바로 캐시에서 데이터를 꺼내온 경우이다.
그렇다면 캐시에 데이터가 있으면 API 호출을 안하냐? 그건 아니다.
일단 우선적으로 캐시에 있는 데이터를 뿌려주고 뒤에서는 API를 호출하고 다시 데이터를 가져와서 가져온 데이터를 다시 캐시에 넣어주고 이런 작업을 하고 있다.

useQuery를 사용하면 이렇게 알아서 데이터를 캐시관리를 해준다.
캐시 저장 시간도 useQuery로 설정해줄수있는데
gcTime으로 설정해줄 수 있다.(버전 5에서 gcTime, 그 이하버전은 cacheTime)
캐시는 주기적으로 비워주는것도 중요. 메모리차지를 하기때문이다.