[ReactQuery] react-query 기초에 대해 가볍게 살펴보기

 

❗ 서론

react-query에 대해 여러 포스팅을 하다가 기초에 대해 왜 갑자기 대뜸 다루느냐는 의문이 들 수 있는 포스팅이다. 강의를 듣고 여러 포스팅들을 보다보니 아직 내가 기초에 대해 잘 알고있지 않은 상태에서 학습을 진행하는 느낌적인 느낌이 들어서 내가 보기 편하게 이런 저런 내용들 정리해두려하는 포스팅이다.

❓ react-query

react-query 를 다루기에 앞서 내가 처음에 조금 헷갈렸던 부분이 있다. 그건 바로 recoil과 react-query !

물론 react-query 에 대해서 잘 모를 때 의문이 들었던건데 혹시 궁금해하실 분이 있을수도 있으니 ....

내가 의문이 들었던 부분은

"recoil도 상태관리 라이브러리고 react-query도 상태관리 라이브러리인데 왜 같이 쓰는거지 ? " 이다

바로 차이점에 대해서 살펴보도록 하자.

recoil은 주로 React 애플리케이션 내의 전역 상태 관리에 중점을 두는 반면 react-query 는 효율적인 데이터 가져오기, 캐싱 및 동기화에 특화되어 있다. 끝.. 난 이 문장을 보고 머리에 느낌표가 찍혔다 ! 

 

그렇다면 이제 진짜 본격적으로 react-query 에 대해서 알아보도록 하자 

react-query 는 React 애플리케이션에서 데이터 가져오기, 캐싱 및 동기화를 관리하기 위한 일련의 후크 및 유틸리티를 제공하는 라이브러리이다. 서버 API에서 데이터를 가져오고, 캐싱을 처리하고, 데이터가 변경될 때 자동으로 구성 요소를 업데이트하는 프로세스를 단순화해주고 네트워크 요청을 최적화하고 상용구 코드를 줄이며 데이터 기반 React 애플리케이션의 전반적인 성능을 향상시켜준다.

---

✔ 초기 설치 및 셋팅

npm i @tanstack/react-query

터미널에서 해당 명령을 통해 react-query 를 설치하고.

import { useQuery,  QueryClient,  QueryClientProvider } from '@tanstack/react-query'

// QueryClient 생성
const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

최상위 컴포넌트에 Provider로 이하 컴포넌트를 감싸고 queryClient를 내려보내주면 기초 셋팅은 끝 !

** 추가적으로 react-query-devtools 를 같이 사용한다면 내부 작업들을 시각화할 수 있어 아주 좋다

 

✔ 중요한 기본 사항

Query들은 4개의 상태를 가지며, useQuery가 반환하는 객체의 프로퍼티로 어떤 상태인지 확인이 가능하다.

• fetching - 요청 중인 쿼리
• fresh - 만료되지 않은 쿼리. 컴포넌트가 마운트, 업데이트되어도 데이터를 다시 요청하지 않는다
• stale - 만료된 쿼리. 컴포넌트가 마운트, 업데이트되면 데이터를 다시 요청한다.
• inactive - 쿼리가 실행된 컴포넌트가 unmount 됐을 때, 해당 컴포넌트에서 불러와졌던 데이터들은 inactive상태가 된다. 즉, 사용되지는 않지만 캐싱이 되어 있는 상태(메모리에 남아 있는 상태)다.
• delete - 가비지 컬렉터에 의해 캐시에서 제거된 쿼리

다음 경우에 리패칭이 일어난다

1. Remount
   컴포넌트 또는 페이지를 다시 mount 했을 때, 새로운 데이터를 갱신한다.
   refetchOnMount 옵션을 통해 설정할 수 있으며, default 값은 true이다.
2. Window refocus
   윈도우 창을 다시 focus 할 때, 새로운 데이터를 갱신한다.
   refetchOnWindowFocus 옵션을 통해 설정할 수 있으며, default 값은 true이다.
3. Network reconnect
   네트워크가 다시 연결되면, 새로운 데이터를 갱신한다.
   refetchOnReconnect 옵션을 통해 설정할 수 있으며, default 값은 true이다.

그 밖에 주기적으로 데이터를 새로운 데이터를 갱신할 수 있는 refetchInterval, refetchIntervalInBackground 등의 옵션을 제공하고 있다. 자세한 내용은 공식 문서를 살펴보면 더 좋다 ! 

 

앞으로 내가 보기쉽게 정리할 내용이 추가적으로 발생한다면 내용을 주기적으로 추가할 예정이다.

그리고 참고로 react-query 는 공식 문서가 상당히 친절하다고 하니 공식 문서를 살펴보면 최고일지도 !

 

https://tanstack.com/query/latest/docs/react/overview

Overview | TanStack Query Docs