1. React Query (TanStack Query)

- 개요

• API 사용할때 활용하는 라이브러리
• Hooks 를 통해 Fetch 데이터 접근 도움
• Loading State, Cache, Infinity Scroll 도 도와줍니다.

- 캐싱

• 데이터가 한번 fetch 되면 다시 fetch 하지 않겠다는 걸 의미합니다.
• API 사용료, 이용횟수 등의 관리에도 용이합니다.
• onMountBlur 속성을 사용하면 다른 탭 다녀올시 이미지를 새로 로드해야하지만 Fetching 할 필요는 없습니다. (React Native)

- Queries

• Fetch 된 데이터를 캐싱하는 핵심 개념

• useQuery() 훅을 사용합니다.

• useQuery() 훅은 두 개의 인자를 갖습니다.

  • 첫 번째 인자 : 쿼리 이름을 뜻하는 unique 한 key 배열 (배열로 v4 부터 바뀌었습니다)

  • 두 번째 인자 : Fetcher, API 로 부터 데이터를 Fetch 하고 역직렬화하여 Object 로 데이터를 반환해주는 함수

• useQuery() 를 이용하면 Object 를 반환해주고, 원하는 정보들을 구조 분해 할당으로 받아서 사용하는 것이 일반적입니다.

  • 데이터, 업데이트날짜, 로딩여부, 리펫칭여부 등의 수많은 정보를 얻을 수 있습니다.

- QueryClient

• 캐시에 접근할 수 있는 방법
• 동시에 query manager 에 접근할 수도 있습니다.
• 모든 쿼리를 통제할 수 있습니다.
• 모든 쿼리의 삭제, refetching 등을 수행할 수 있습니다.

- Queries, QueryClient 코드 예시

• ~/App.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
...(생략)

const queryClient = new QueryClient();

...(생략)

return (
  <QueryClientProvider client={queryClient}>
    <Movie />
  </QueryClientProvider>
)

• ~/screens/Movie.tsx

...(생략)

const queryClient = useQueryClient();

const {
  data: nowPlayingData,
  isLoading: isLoadingNowPlaying,
  isRefetching: isRefetchingNowPlaying,
} = useQuery(["movies", "nowPlaying"], moviesApi.nowPlaying);
const {
  data: upcomingData,
  isLoading: isLoadingUpcoming,
  isRefetching: isRefetchingUpcoming,
} = useQuery(["movies", "upcoming"], moviesApi.upcoming);
const {
  data: trendingData,
  isLoading: isLoadingTrending,
  isRefetching: isRefetchingTrending,
} = useQuery(["movies", "trending"], moviesApi.trending);

const onRefresh = async () => {
  queryClient.refetchQueries(["movies"]);
};

...(생략)

제가 공부하면서 나중에 다시 보면 복습될 정도로 작성하였습니다.
궁금한 점이나 부족한점 편하게 피드백 부탁드립니다.
참조 : TanStack Query 공식문서, 노마드코더 강의