[React] ReactQuery의 구조 & useQuery 흐름

React Query

리액트에서 비동기 로직을 리액트스럽게 다룰 수 있게 해주는 라이브러리 

서버 상태 관리를 위해 이 라이브러리를 사용

데이터 조회, 캐싱, isLoading, isError등 과 같은 기존 작업을 더욱이 편리하게 제공

 

 

QueryClientProvider

=> 초기 작업이라고도 할 수 있음 

리액트 쿼리 사용을 위해 최상단에서 QueryClientProvider을 사용해 감싼다.

쿼리 인스턴스 생성 후 client={queryClient}작성

 

위의 해당하는 내용을 담은 코드 

import { AlertContextProvider } from '@contexts/AlertContext'
import { QueryClient, QueryClientProvider } from 'react-query';

const client = new QueryClient({
  defaultOptions: {},

})


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Global styles={globalStyles} />
    <QueryClientProvider client={client}>
      <AlertContextProvider>
        <App />
      </AlertContextProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

 

QueryClient인스턴스를 생성해 프로젝트 루트 등록, useQuery자체 훅을 사용해 데이터를 조회 및 캐싱

 

 

 

UseQuery 

import { useQuery } from "react-query";

function AdBanners() {
  const { data } = useQuery(['adBanners'], () => getAdBanners())
  return (

 

 

 

 

QueryKey : useQuery의 첫번째 인자 

useQuery 훅에서 사용하는 첫 번째 인자는 queryKey, uniqueKey이다. (쿼리를 지칭할 이름)

queryKey는 React Query가 캐시와 관련된 데이터를 구분하고 관리하는 데 사용

key로는 sring과 배열이 전달 가능

그러니까 위의 코드에서는 adBanners가 queryKey이다. 

 

 

 

 

Query Functions : useQuery의 두번째 인자(fetcher함수)

promise를 반환하는 함수를 넣어야함 

api호출 함수 전달 

주의할점 

(querykey를 고유하게 만들 것 )

 

밑에 블로그가 설명 잘해놔서 참고하려고 가져옴 !

 

 

https://fe-developers.kakaoent.com/2023/230720-react-query/

React Query의 구조와 useQuery 실행 흐름 살펴보기 | 카카오엔터테인먼트 FE 기술블로그