React | React-Query

React

목차

1. React-Query
2. React-Query를 사용하는 이유
3. React-Query의 장점
4. React-Query의 사용예시(+주의사항)

1. React-Query

: React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리

2. React-Query를 사용하는 이유

• 서버와 클라이언트 데이터를 안전하게 분리하여 사용할 수 있음
• 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용

3. React-Query의 장점

1. 프로젝트 구조가 기존보다 단순해짐
2. 캐싱 처리가 더 간단해짐
3. 동일 데이터 여러번 요청하면 한번만 요청
4. 직접 만들어서 사용했던 기타 기능들을 옵션으로 지원함
5. Redux와 Redux-Saga를 사용할 때는 Success, Failure 값을 useEffect의 deps로 전달해서 처리해야 하는 과정이 필요했었는데, 이 과정을 onSuccess와 onError로 간단하게 처리할 수 있음

4. React-Query의 사용예시(+주의사항)

• 주의사항

  1. useQueries에는 options 값을 설정할 수 없음
     options에 대한 Object 값을 설정하는 게 아닌, options에 대한 값 자체를 선언해야 동작함

  2. isLoading은 캐싱된 데이터가 없을 때만 true를 리턴

     • isFetching : 캐싱 된 데이터 유무에 상관없이 데이터 Fetching 때마다 true를 리턴함
     • isLoading : 캐싱 된 데이터가 없을 때만 true를 리턴함
  3. useMutation의 mutate함수는 Promise를 반환하지 않음

  4. useIsFetching과 queryClient.isFetching은 결과가 다름

     • 둘 모두 현재 fetching 중인 쿼리의 개수를 리턴하는 역할을 함
     • useIsFetching : 내부적으로 queryClient의 queryCache들을 Observing 하면서 fetching 개수를 리턴
     • queryClient.isFetching : Observing 하지 않고 현재 캐싱 된 데이터의 fetching 개수를 리턴

• 사용예시

  코드 예시

  1. 프로젝트 생성

       npx create-react-app my-app
       cd my-app
       yarn install react-query
       yarn install && yarn start
     

  2. react-query 세팅

      // src/index.js
      import React from "react";
      import ReactDOM from "react-dom";
      import App from "./App";
      import { QueryClient, QueryClientProvider } from "react-query";
      import { ReactQueryDevtools } from "react-query/devtools";
      const queryClient = new QueryClient();
      ReactDOM.render(
        <React.StrictMode>
          <QueryClientProvider client={queryClient}>
            {/* devtools */}
            <ReactQueryDevtools initialIsOpen={true} />
            <App />
          </QueryClientProvider>
        </React.StrictMode>,
        document.getElementById("root")
      );
     

     1. useQuery : 데이터를 get하기 위한 api
     2. useQueries : useQuery를 비동기로 여러개 실행할 경우
     3. QueryCache : 쿼리에 대한 성공, 실패 전처리 가능
     4. useMutation : 값을 바꿀 때 사용하는 api

     </div></details>

  
  

---

출처

react-query
My구독의 React Query 전환기
[React] React-Query 사용 이유 & Queries 개념편