🔧[ React Query ] 리엑트 쿼리 사용법

 

 

 

 

 

 

 

 

 

 

 

 

react query란?

 

Fetch, cache and update data in your React and React Native applications all without touching any "global state".

=> react나 react native에서 전역상태를 건드리지 않고 데이터를 fetch, cache, update할 수 있게 하는 상태 관리 도구.

서버 상태를 관리하는 라이브러리이다.

'서버와 클라이언트 사이 비동기 로직을 쉽게 다루게 해주는 도구.'

 

 

 

성능

 

복잡한 코드를 몇 줄의 코드로 교체할 수 있다.

새로운 데이터 소스를 연결하는 것이 편리해진다.

복잡하고 계속되는 데이터 소스의 re-road를 막을 수 있다.

메모리 성능을 높일 수 있다

 

 

 

 

 

 

설치

npm i react-query

yarn add react-query

 

 

 

 

 

 

사용법

React qurey는 함수형 컴포넌트 안에서 훅 형태로 사용된다.

 

1. 캐시 관리 인스턴스 연결하기

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
        <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);​

react query는 queryClicent라는 인스턴스를 사용해 캐시를 관리한다.

컴포넌트가 useQuery훅을 사용할 수 있도록 QueryClientProvider을 상위 컴포넌트에 추가해주어야 한다

 

 

 

 

2. 데이터 가져오기

데이터를 사용할 곳에 가서 useQuery를 import해준다.

useQuery는 두 가지 인자를 필요로 한다.

- queryKey : 우리 query의 고유식별자 ("고유이름")

- fetcher 함수 : fetchecdData

- refetch interval : refetch하는 interval을 정할 수 있다 (옵션)

 

  const { isLoading, data } = useQuery("고유이름", fetchedData)

useQuery는 isLoading이라고 불리는 boolean값을 리턴하는데,

 

 

이 isLoading은 react query를 사용하지 않고 만들었던 

[loading, setLoading] = useState()

를 대체할 수 있다.

 

 

1. React query에서 useQuery라는 훅이 fetcher함수를 불러오고

/ data 받아오는중

2. fetcher function이 isloading이라면 reactQuery에서 boolean값을 얻어올 수 있다. (isLoading : true)

/ data 받아오는중

3. 그리고 fetcher function의 isloading이 끝나면 React query에게 이 사실을 전달받을 수 있다(isLoading : false)

/ data를 다 받아와 useQuery의 두 번째 인자로 저장

 

 

 

정리

isLoading은 data를 받기 전에는 true(로딩상태일때 true), 받은 후에는 false값을 가지게 되고

data가 받아와지면 useQuery의 두 번째 인자로 저장된다.

 

 

 

 

 

 

++

만약 n가지의 useQuery hook을 같이쓴다면?

 

  const { isLoading: flowerPriceLoading, data: flowerPriceData } = useQuery(["가격", floverId], () => fetchflowerPrice(flowerId));
  const { isLoading: flowerLangLoading, data: flowerLangData } = useQuery(["꽃말", flowerId], () => fetchflowerLang(flowerId));

flowerId가 같을 때 (ex) 수선화

고유한 key가 있어야 하기 때문에 둘 다 useQuery의 첫 번째 인자로 flowerId를 집어넣게되면 고유 key를 만족하지 못한다.

=> 배열로 다른 값들을 넣어주면 고유한 id가 된다.

 

 

 

 

옵션

 initialIsOpen: Boolean

 - 개발 도구를 기본으로 연다(true)

panelProps: PropsObjedt

 - 패널에 props를 추가한다.

closeButtonProps: PropsObject

 - 닫기 버튼에 props 추가

toogleButtonProps: PropsObject

 - 토글 버튼에 props 추가

 

 

https://react-query.tanstack.com/overview

더 다양한 옵션과 설명은 공식문서를 참고하자.

 

 

 

 

React query 사용의 이점

 

1. 캐시 사용 => 메모리 성능 향상

 

react query를 가용함으로서 react query가 데이터를 캐시에 저장해두기때문에

같은 데이터를 받아와 발생하는 로딩이 사라진다.

 

ex)

꽃들이 들어있는 화면에서 data를 받아오는 상황.

1. 꽃들이 들어있는 화면 => 꽃(item) 클릭 => 꽃의 세부사항을 알려주는 화면

2. 꽃의 세부사항을 알려주는 화면 =>*** LOADING *** => 꽃들이 들어있는 화면 

react query를 사용하면 2번에서 발생하는 loading이 사라진다는 소리.

 

 

 

 

2. react query가 제공하는 Devtools.

 

import { ReactQueryDevtools } from "react-query/devtools";

ReactQueryDevtools를 import해오고 나서

 

 <ReactQueryDevtools initialIsOpen={true} />

initialIsOpen 옵션을 true로 설정하면

화면에 devtools가 뜬다.

이 devtool을 통해 캐시에 무엇을 가지고 있는지를 편하게 볼 수 있다.

+

refetch, reset 등 trigger도 가능하다.

 

 

 

3. 코드의 간결함.

 

 

 

 

 

 

도움을 받은 문서들

 

https://techblog.woowahan.com/6339/

 

https://blog.rhostem.com/posts/2021-02-01T00:00:00.000Z

 

https://www.js2uix.com/frontend/react-query-step1/#%EC%84%9C%EB%B2%84-%EC%83%81%ED%83%9C

 

 

 

 

 

2022.01.19 

계속 이용해보며 새로 알아가는 사실들을 업데이트 할 예정.