[날로먹는 REACT-QUERY] - 설치부터 기본 세팅

필자는 무언가를 만들기전 개념을 익히고 시작하기보단 무작정 부딛혀보고 이후 개념을 익히는걸 좋아한다.
필자와 비슷한사람들이 있을것이라 생각하고 날로먹는 react-query를 써볼려고 한다.
개념과 관련된 내용은 추후 익혀먹기 시리즈로, 그보다 deep한 내용은 고아먹기 시리즈로 찾아뵙도록 하겠다.

---

react-query 그게뭔데?

React를 위한 강력하고 강력한 데이터 동기화
"전역 상태"를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트합니다.
공식문서 발췌: https://react-query-beta.tanstack.com/

개념은 나중에 익히고 일단 만들어보자
쫄지말고 일단 시작해보자!

---

Installation and setting

설치부터 해보자

$ npm i @tanstack/react-query
혹은
$ yarn add @tanstack/react-query

설치가 완료되었으면 react-query를 react앱에서 사용할 준비를 해야한다.
app파일로 이동해서 아래와 같이 셋팅해주자

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App"></div>
    </QueryClientProvider>
  );
}

export default App;

react-query를 불러온뒤 QueryClient를 사용하여 캐시와 상호작용이 가능하다!
이후 QueryClient를 리액트와 연결하기위해 QueryClientProvider를 사용하여 한번 감싸주도록 하자

Devtools install

개발을 하면서 redux-devtools 혹은 react-devtools와 유사한것들을 사용해본 경험이 있을것이다.
크롬 익스텐션을 깐다던가 하는방식으로도 말이다
리액트 쿼리는 매우 쉽게 개발자 도구를 셋팅할 수 있다.(단 react 한정 react-native는 아직 지원이...)

$ npm i @tanstack/react-query-devtools
혹은
$ yarn add @tanstack/react-query-devtools

설치 후 아래와 같이 셋팅해보자

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App"></div>
      <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>
  )
}

그럼 아래 사진과 같이 나올것이다.

마치며

이로써 기본 셋팅 및 개발자 도구까지 설치해봤다
다음글은 react-query를 활용하여 api를 호출하는 방법을 배워보도록 하겠다.