TanStack Query(React Query)

웹 애플리케이션에서 데이터 가져오기, 캐싱, 동기화 및 서버 상태 업데이트를 간편하게 도와주는 라이브러리
( 이전에는 React Query였으나 React외 다른 프레임워크에서도 사용할 수 있게함으로써 TanStack Query로 이름 변경)

주요 기능

• 데이터 가져오기 및 캐싱 : 서버로부터 데이터를 가져오고 이를 캐시하여 성능 최적화
• 중복 요청 방지 : 동일한 요청에 대해 중복된 API 호출 방지
• 신선한 데이터 유지 : 데이터의 신선도를 유지하기 위해 자동 갱신 기능 제공
• 성능 최적화 : 무한 스크롤, 페이지네이션 등의 기능을 통해 성능 향상
• 네트워크 재연결 및 요청 실패 처리 : 네트워크가 재연결되거나 요청이 실패했을 때 자동으로 갱신

설치

$ npm i @tanstack/react-query

기본 세팅

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

const queryClient = new QueryClient();

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

사용 예시

  const {
    data: genre, isLoading, error} = useQuery({
	    queryKey: ['genre'],
	    queryFn: fetchGenre,
  });

queryKey

: 특정 커리를 식별하는데 사용되는 고유 키 (쿼리의 캐싱, 무효화 및 재요청을 관리하는데 중요한 역할)

• 문자열 또는 배열 형태로 제공
  • 배열 형태일 경우, 첫 번째 요소는 쿼리의 이름(문자열)이고 나머지 요소들은 쿼리의 매개변수로 사용됨

queryFn

: 데이터를 가져오는 함수

• 일반적으로 비동기 함수로 작성되며, API 호출이나 데이터베이스 쿼리 등을 수행

queryKey를 기준으로 캐시되며,
동일한 쿼리가 요청될 경우 캐시된 데이터를 반환하여 불필요한 네트워크 요청을 줄입니다.

데이터가 변경되거나 업데이트가 필요할 때, 쿼리를 무효화하여 새로운 데이터를 가져와 UI를 항상 최신 상태로 반영되도록 합니다.