1차 적인 정리는 끝냈음

1. 수정 사항으로는 알아듣기 쉽게 코드를 번역한 후 우리가 사용할 수 있도록 예시를 좀 다듬는 과정 필요
2. fetch, axios 등에 대해서 추가적으로 정리필요

React Query

• fetching, caching, 서버 데이터의 동기화를 지원해주는 라이브러리
• React Application 서버 상태를 불러오고 캐싱하고 지속적 동기화 작업을 도와주는 라이브러리
• React Component 내부에서 간단하고 직관적으로 API 사용이 가능함
• 비동기 데이터 불러오는 과정에서 발생하는 문제를 해결해주는 역할

기본 세팅

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

// 아래와 같이 QueryClient에 defaultOptions를 설정해서 사용할 수도 있습니다.// const queryClient = new QueryClient({//   defaultOptions: {//     queries: {//       suspense: true,//     },//   },// })function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
			<ReactQueryDevtools /> // 선택사항
    </QueryClientProvider>
  )
}

• 최상위 컴포넌트 위에 QueryClientProvider로 감싸줘야 한다.

캐싱(Caching)

• 데이터의 복사본을 저장 후 동일한 데이터의 재접근 속도를 높이는 것이 캐싱이다!!
• 반복적인 비동기 데이터 호출을 방지 후 불필요한 API 콜을 줄이며 서버에 부하를 줄여주는 것이 React Query이다
• React Query 기본 제공 옵션들

   refetchOnWindowFocus,// default : true
   refetchOnMount,// default : true
   refetchOnReconnect,// default : true
   staleTime,// default : 0
   cacheTime,// default : 5분 ( 60 * 5 * 1000)