TanStack Query는 Redux, MobX 또는 기타 전역 상태 관리자를 대체하나요?

먼저 몇 가지 중요한 항목부터 살펴보겠습니다:

TanStack Query는 서버 상태 라이브러리로, 서버와 클라이언트 간의 비동기 작업을 관리합니다
Redux, MobX, Zustand 등은 비동기 데이터를 저장하는 데 사용할 수 있지만 TanStack Query 같은 도구와 비교하면 비효율적인 클라이언트 상태 라이브러리입니다

이러한 점을 고려하면, 간단히 말해 TanStack Query 는 클라이언트 상태의 캐시 데이터를 관리하는 데 사용되는 상용구 코드와 관련 연결 코드를 단 몇 줄의 코드로 대체합니다.

대다수 애플리케이션에서는 모든 비동기 코드를 TanStack Query로 마이그레이션한 후 남는 진정한 전역 접근 가능 클라이언트 상태가 일반적으로 매우 적습니다.

애플리케이션에 실제로 방대한 양의 동기식 클라이언트 전용 상태가 존재할 수 있는 상황(예: 시각 디자인 또는 음악 제작 애플리케이션)은 여전히 있으며, 이 경우에는 아마도 여전히 클라이언트 상태 관리자가 필요할 것입니다. 이 상황에서는 TanStack Query가 로컬/클라이언트 상태 관리를 대체하지 않는다는 점에 유의해야 합니다. 하지만 TanStack Query를 대부분의 클라이언트 상태 관리자와 아무 문제 없이 함께 사용할 수 있습니다.

인위적인 예시

여기서는 전역 상태 라이브러리가 관리하는 일부 "전역" 상태가 있습니다:

const globalState = {
  projects,
  teams,
  tasks,
  users,
  themeMode,
  sidebarStatus,
}

현재 전역 상태 관리자는 projects, teams, tasks, users의 4가지 서버 상태를 캐시하고 있습니다. 이러한 서버 상태 자산을 TanStack Query로 옮긴다면 남은 전역 상태는 다음과 같은 모습에 더 가까워집니다:

const globalState = {
  themeMode,
  sidebarStatus,
}

이는 또한 useQuery와 useMutation을 몇 차례 훅으로 호출하는 것만으로 서버 상태를 관리하는 데 사용했던 모든 상용구 코드도 제거할 수 있음을 의미합니다. 예:

커넥터
액션 생성자
미들웨어
리듀서
로딩/오류/결과 상태
컨텍스트

이 모든 요소를 제거하면 **"이 작은 전역 상태를 위해 클라이언트 상태 관리자를 계속 사용할 가치가 있을까?"**라는 의문이 들 수 있습니다.

그리고 그것은 여러분에게 달려 있습니다!

하지만 TanStack Query의 역할은 명확합니다. 애플리케이션에서 비동기 연결 코드와 상용구를 제거하고 단 몇 줄의 코드로 대체합니다.

무엇을 기다리고 있나요? 지금 바로 사용해 보세요!

인위적인 예시​

인위적인 예시