[React-Query] @tanstack/react-query

카테고리 : Development
태그: reactquery · react-query 학습 · React Query · tanstack/react-query · React Query 기능 · React Query 설정
등록일: 2023년 12월 26일
최근 업데이트: 2023년 12월 26일

---

• 1. React Query
  • 1) 기능
  • 2) 기본 설정

1. React Query

• **서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리**
• 기존 상태 관리 라이브러리는 클라이언트 작업에 적합하지만 비동기(redux-saga 등) 또는 서버 상태 작업에 좋지 않다고한다
• 클라이언트 상태(Client State)와 서버 상태(Server State)는 완전히 다른 개념이며, 클라이언트 상태는 각각의 input 값으로 예를 들 수 있고, 서버 상태는 데이터베이스에 저장되어 있는 데이터다

1) 기능

• 캐싱
• 동일한 데이터에 대한 중복 요청을 단일 요청으로 통합
• 백그라운드에서 오래된 데이터 업데이트
• 데이터가 얼마나 오래되었는지 알 수 있다.
• 데이터 업데이트를 가능한 빠르게 반영
• 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화
• 서버 상태의 메모리 및 가비지 수집 관리
• 구조 공유를 사용한 쿼리 결과 메모화

2) 기본 설정

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      // ...
    },
  },
});

• QueryClient를 사용한 캐시와 상호 작용 가능
• QueryClient에서 모든 query 또는 mutation에 기본 옵션을 추가할 수 있다

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

const queryClient = new QueryClient({ /* options */});

function App() {
  return (
   <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <AppInner />
      </NavigationContainer>
   </QueryClientProvider>;
  );
}

• react-query를 사용하기 위해서는 QueryClientProvider를 최상단에서 감싸주고 QueryClient 인스턴스를 client props로 넣어 애플리케이션에 연결
• QueryClientProvider로 컴포넌트를 감싸고, client props에다 queryClient를 연결함으로써, 이 context는 앱에서 비동기 요청을 알아서 처리하는 background 계층이 됌