React : TanStack Query 동작 원리

React

고래고래00 2024. 6. 14. 09:52

TanStack Query : 강력한 서버 상태를 관리 도구

Fetching : 서버에서 데이터 가져오기

Caching : 가져온 데이터를 기억해놓고 동일한 데이터 반복 요청 X

Synchronizing : 서버의 데이터와 캐시된 데이터 동기화

Updating : 서버의 데이터를 업데이트하고 캐시에 반영

최신 데이터가 도착하기 전까지 기존 캐시 데이터를 사용

(stale : 신선하지 않은, 오래된)

TanStack Query는 SWR전략 사용

TanStack Query는 캐시 데이터를 전역 관리

QueryClientProvider를 사용해 애플리케이션 전체에서 캐시 데이터에 접근 가능

(∵ TanStack Query는 Context API를 사용해서 구현되고 모든 자식 컴포넌트가 캐시 데이터에 접근 가능)

cache context, cache data

TanStack Query가 내부적으로 이용하는 이 Context => 캐시 컨텍스트

그 안에 저장되어 사용되는 데이터 => 캐시 데이터

=> Redux처럼 Provider로 프로젝트를 감싸야함

A컴포넌트 - const { data } = useQuery(["todos"], getTodos) 캐시 컨텍스트에 데이터 요청

=> 캐시 데이터 확인 => 없다면(undefined) getTodos 호출 => API 서버(DB)에서 데이터를 가져와

캐시 컨텍스트에 저장 => 리렌더링 => useQuery를 다시 실행해 캐시 컨텍스트에 데이터 요청

=> 캐시 데이터를 반환

B컴포넌트 - const { data } = useQuery(["todos"], getTodos) 데이터 요청

=> A컴포넌트에서의 요청에서 캐싱한 데이터를 가져옴

C컴포넌트 - useMutation을 이용해 DB의 데이터 변경

=> 캐시 컨텍스트에 있는 캐시 데이터는 더이상 새로운 데이터가 아님

=> invalidateQueries 처리로 useQuery를 이용한 모든 곳에서 새로운 데이터 구독

React Query는 TanStack Query의 그냥 예전 이름, 버전만 다름 (v4부터 TanStack Query)

TanStack Query에서의 개선점