그럼 몇 가지 중요한 항목부터 시작하겠습니다:
- TanStack Query는 server-state 라이브러리로, 서버와 클라이언트 간의 비동기 연산들을 관리합니다.
- Redux, MobX, Zustand 등은 비동기 데이터를 저장하는 데 사용할 수 있는 client-side 라이브러리들이지만 TanStack Query와 같은 도구와 비교할 때 비효율적입니다.
이러한 점을 염두에 두고 간단히 말하자면, TanStack Query는 client-state에서 캐시 데이터를 관리하는 데 사용되는 상용구(boilerplate) 코드와 관련 배선(wiring)을 단 몇 줄의 코드로 대체한다는 것입니다.
대부분의 애플리케이션의 경우, 모든 비동기 코드를 TanStack Query로 마이그레이션한 후에 남아있는 진정한 전역 접근 가능한 클라이언트 상태(globally accessible client state는 일반적으로 매우 작습니다.
"시각 디자이너나 음악 제작 애플리케이션과 같이 애플리케이션에 대량의 동기식 클라이언트 전용 상태가 실제로 있을 수 있는 상황이 여전히 존재하며, 이 경우에도 클라이언트 상태 관리자가 필요할 수 있습니다. 이러한 상황에서는 TanStack Query가 로컬/클라이언트 상태 관리를 대체하지 않는다는 점에 유의하는 것이 중요합니다. 하지만 대부분의 클라이언트 상태 관리자와 함께 사용하면 아무런 문제 없이 사용할 수 있습니다."
A Contrived Example
여기에는 글로벌 상태 라이브러리가 관리하는 "global" 상태가 있습니다:
const globalState = {
projects,
teams,
tasks,
users,
themeMode,
sidebarStatus,
}
현재 글로벌 상태 관리자는 projects, teams, tasks, users 등 4가지 타입의 서버 상태를 캐싱하고 있습니다. 이러한 서버 상태 assets을 TanStack Query로 옮긴다면, 남은 글로벌 상태는 다음과 같이 보일 것입니다:
const globalState = {
themeMode,
sidebarStatus,
}
이는 또한 useQuery, useMutation에 대한 몇 번의 훅 호출을 통해 서버 상태를 관리하는 데 사용되었던 상용구 코드도 제거할 수 있음을 의미합니다. 예를 들어
- Connectors
- Action Creators
- Middlewares
- Reducers
- Loading/Error/Result states
- Contexts
이러한 모든 기능이 제거되었으니 "이 작은 글로벌 상태에 클라이언트 상태 관리자를 계속 사용할 가치가 있을까?"라고 자문해 볼 수 있습니다.
그것은 여러분에게 달려 있습니다!
하지만 TanStack Query의 역할은 분명합니다. 애플리케이션에서 비동기 배선과 상용구를 제거하고 단 몇 줄의 코드로 대체합니다.
지금 바로 사용해 보세요!
Reference
