🎈 TanStack Query란
React, Vue, Svelte 에서 사용 가능한 강력한 비동기 상태 관리 라이브러리이다.
TansStack Query는 data fetching, caching, server state의 동기화와 업데이트를 쉽게할 수 있도록 다양한 기능을 제공한다.
기존 React만을 지원하던 React Query (~v3)에서 Vue, Svelte 등 다른 프레임워크까지 지원 가능해진 React Query v4를 TanStack Query라고 한다.
✨ TanStack Query의 장점
1. Data Caching을 통한 불필요한 네트워크 요청 방지
TanStack Query는 유니크한 키 값으로 데이터를 저장한다. 이 저장한 데이터를 통해 동일한 네트워크 요청이 발생시, 저장된 값을 재사용하여 불필요한 네트워크 요청을 막을 수 있다.
2. 손쉬운 네트워크 상태 제공
TanStack Query에서는 Data fetching 요청이 있을 때, 이에 대한
loading,error,success상태를 바로 얻을 수 있다. 이를 통해 기존 비동기 요청에서 비동기 상태를 구분하기 위해 필요한 코드를 줄일 수 있다.
// useQuery에서 비동기 요청에 필요한 다양한 정보들을 제공한다.
const { data, isLoading, error, status, ... } = useQuery([...], () => {})
3. 네트워크 통신 실패 시, 자동 refetch 지원
TanStack Query는 네트워크 요청에 실패하면 디폴트로 3번의 refetch를 한다. 각 요청에 대해서 뒤의 요청일수록 대기 시간을 더 길게 가진다.
이 refetch 기능은
useQuery의retry와retryDelay옵션을 통해 변경할 수 있다.
🔎 TanStack Query의 동작 원리
- Client가 React Query에 유니크한 Key 값을 통한 데이터 요청을 보낸다.
- React Query 메모리에 해당 Key 값에 대한 정보가 없다면 서버로 네트워크 요청을 보내고 서버로부터 데이터를 받아 Client에게 전달한다.
2-1. 이때 React Query에서는 해당 Key에 대한 정보를 메모리에 저장하여 Caching에 이용한다.
- Client에서 동일한 Key 값으로 데이터 요청을 한다면 React Query에 이미 저장되어 있던 데이터를 그대로 Client에게 전달한다.
- 만약 데이터가 오래되었다면(stale 상태라면) 서버에 다시 데이터 요청을 하여 최신의 데이터를 받은 후, Client에게 다시 업데이트된 데이터를 전달한다.
📑 정리
TanStack Query(=React Query)를 사용한다면 기존의 React와 Redux에서 사용했던 비동기 로직들을 간편하게 개선해 줄 수 있을 것 같다.
앞으로 프로젝트를 할 때 TanStack Query를 도입하면서 기존의 로직보다 어떤 점이 좋아졌는지 하나하나씩 비교하며 익혀나가야겠다.
