[React] React-Query 란?

React-Query

React app에서 비동기 로직을 쉽게 다루게 해주는 data fetching 라이브러리입니다. 

"전역 상테"를 건드리지 않고도 React 및 React-Native 앱에서 서버의 값을 클라이언트에 가져오고 캐시하고 업데이트할 수 있습니다. 이것을 사용하면 서버 상태의 까다로운 문제와 장애물을 극복하고 앱 데이터가 사용자를 제어하기 시작하기 전에 앱 데이터를 제어할 수 있습니다.

 

사용하는 이유

서버로 부터 값을 가져오거나 업데이트를 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그러다보면 store는 클라이언트 state를 유지해야하는데, 어느 순간부터 서버 데이터와 클라이언트 데이터가 공존하게 됩니다.(redux가 그러함..) 이런 부분을 분리해서 사용하기 위해서 씁니다. 

 

장점

• 캐싱
• get한 데이터에 대해서 update를 하면 자동으로 다시 get을 수행합니다 
• 데이터가 오래 되었다고 판단되면 다시 get 합니다
• 동일 데이터 여러번 요청하면 한번만 요청합니다 
• 무한 스크롤 (Infinite Queries)
• 비동기 과정을 선언적으로 관리할 수 있습니다
• react-hook과 사용하는 구조가 비슷합니다

 

 

 

 

기본 셋팅

QueryClientProvider 

• 리액트 쿼리를 사용하기 위해서 최상단에 감싸주어야한다. 
• 그 다음 사용할 곳에서 쿼리 인스턴스를 생성행서 작성해주면 된다. 

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

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  );
}

 

 

 

useQuery

import { useQuery } from "react-query";
// 주로 사용되는 3가지 return 값 외에도 더 많은 return option들이 있다. 
const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

옵션보러가기 

 

 

 

 

 

....계속~ 

 

 

 

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

React Query

 

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

Store에서 비동기 통신 분리하기 (feat. React Query) | 우아한형제들 기술블로그