# Today I Learn - 2022.05.16

# Pre Onboarding Course

# 리액트 쿼리

  1. 캐싱
  2. get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행 (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행)
  3. 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
  4. 동일 데이터 여러번 요청하면 한번만 요청 (옵션에 따라 중복 호출 허용 시간 조절 가능)
  5. 무한 스크롤 (Infinite Queries (opens new window))
  6. 비동기 과정을 선언적으로 관리
  7. react hook과 사용하는 구조가 비슷함
  1. react프로젝트에서 yarn install react-query && npm i react-query로 패키지 설치
  2. 가장 기본이 되는 index.js에 아래와 같이 QueryClient, QueryClientProvider, ReactQueryDevtools를 import한 후 컴포넌트 배치
// root index.js
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode><QueryClientProvider client={queryClient}><ReactQueryDevtools initialIsOpen /><Routes /></QueryClientProvider></React.StrictMode>);