✨ TanStack Query 란?
React, Vue, Svelte에서 사용 가능한 강력한 비동기 상태 관리 라이브러리.
TanStack Query는 data fetching, caching, server state의 동기화와 업데이트를 쉽게 할 수 있도록 다양한 기능을 제공.
기존 React만을 지원하던 React Query(1~3)에서 Vue, Svelte 등 다른 프레임워크까지 지원 가능해진 React Query v4를 TanStack Query라고 함.
✨ TanStack Query의 장점
- Data Caching을 통한 불 필요한 네트워크 요청 방지
TanStack Query는 유니크한 키 값으로 데이터를 저장. 이 저장한 데이터를 통해 동일한 네트워크 요청 발생시, 저장된 값을 재사용하여 불필요한 네트워크 요청을 막을 수 있음.
- 손쉬운 네트워크 상태 제공
TanStack Query는 Data fetching 요청이 있을 때, 이에 대한loading,error,success, 상태를 바로 얻을 수 있다. 이를 통해 기존 비동기 요청에서 비동기 상태를 구분하기 위해 필요한 코드를 줄일 수 있다.
- 네트워크 통신 실패 시, 자동 refetch 지원
TanStack Query는 네트워크 요청에 실패하면 디폴트로 3번의 refetch를 한다. 각 요청에 대해서 뒤의 요청일수록 대기 시간을 더 길게 가진다. 이 refetch 기능은useQuery의retry와retryDelay옵션을 통해 변경 가능함.
✨ TanStack Query 동작 원리
- Client가 React Query에 유니크한 Key 값을 통한 데이터 요청을 보냄.
- React Query 메모리에 해당 Key 값에 대한 정보가 없다면 서버로 네트워크 요청을 보내고 서버로부터 데이터를 받아 Client에게 전달함.
- 이때 React Query에서는 해당 Key에 대한 정보를 메모리에 저장하여 Caching에 이용한다.
- Clinet에서 동일한 Key 값으로 데이터 요청을 한다면 React Query에 이미 저장되어 있던 데이터를 그대로 Client에게 전달함
- 만약 데이터가 오래되었다면(stale 상태) 서버에 다시 데이터 요청을 하여 최신의 데이터를 받은 후, Client에게 다시 업데이트 된 데이터를 전달
🚀 TanStack Query 사용 이유
우선 TanStack Query가 redux같은 전역 상태관리 라이브러리를 대체할 수는 없다고 생각한다.
이유는 역할이 명확하다. TanStack Query는 서버 상태를 다루는 라이브러리이며, Redux는 클라이언트의 상태를 다루는 라이브러리로 목적부터가 상이하다.
즉 TanStack Query는 전역 상태 관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리이다. TanStack Query를 자꾸 치다보니까 좀 귀찮으니 줄여서 TQ라고 지칭하겠다.
다만 TQ를 도입한다면 개발자가 전역적으로 관리해야하는 데이터를 매우 적을 것이라 예상이 된다. 따라서 이번 프로젝트에서는 Redux 처럼 러닝 커브가 있고, 보일러 플레이트가 존재하는 복잡한 라이브러리보다 Recoil이나 jotai 같은 러닝 커브가 낮고 간소한 상태관리 라이브러리를 함께 사용하면 시너지가 날 것으로 예상이된다.
서버와 상관이 없는 데이터는 Recoil 또는 jotai에서 관리 하고 서버과 관련된 데이터는 TQ를 사용하면 생산성에 있어서 더욱 좋은 영향을 끼칠 것이라 예상된다.