tanstack/react-query
tanstack/react-query
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
계층이 됌