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

269자

4분

강의 목차

간단한 예제

TanStack Query와 Redux, MobX 같은 라이브러리의 역할을 명확히 이해하는 것이 중요합니다. 이들의 주요 차이점은 다음과 같습니다:

TanStack Query는 서버 상태를 관리합니다. 서버와 클라이언트 간의 비동기 작업을 처리하는 데 특화되어 있죠.
Redux, MobX, Zustand 등은 클라이언트 상태를 관리합니다. 이들도 비동기 데이터를 저장할 수 있지만, TanStack Query에 비해 효율성이 떨어집니다.

간단히 말해, TanStack Query는 클라이언트 상태에서 캐시 데이터를 관리하는 복잡한 코드를 몇 줄로 줄여줍니다.

대부분의 애플리케이션에서 TanStack Query로 비동기 코드를 옮기고 나면, 실제로 전역적으로 접근해야 할 클라이언트 상태는 매우 적어집니다.

물론 예외도 있습니다. 시각적 디자인 도구나 음악 제작 앱처럼 동기적인 클라이언트 전용 상태가 매우 많은 경우, 여전히 클라이언트 상태 관리자가 필요할 수 있습니다. 이런 상황에서 TanStack Query는 로컬/클라이언트 상태 관리를 대체하지 않습니다. 하지만 대부분의 클라이언트 상태 관리자와 함께 문제 없이 사용할 수 있습니다.

간단한 예제

전역 상태 라이브러리로 관리되는 "전역" 상태를 살펴봅시다:

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

여기서 전역 상태 관리자는 4가지 서버 상태(projects, teams, tasks, users)를 캐싱하고 있습니다. 이 서버 상태를 TanStack Query로 옮기면 남는 전역 상태는 다음과 같이 줄어듭니다:

const globalState = {
  themeMode,
  sidebarStatus,
}
 typescript

useQuery와 useMutation 훅을 몇 번 호출하는 것만으로, 서버 상태를 관리하던 복잡한 코드를 제거할 수 있습니다. 예를 들어 다음과 같은 것들이 사라집니다:

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

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

이에 대한 답은 여러분의 판단에 달려 있습니다!

하지만 TanStack Query의 역할은 분명합니다. 애플리케이션에서 비동기 작업과 관련된 복잡한 코드를 제거하고, 몇 줄의 코드로 대체합니다.

더 이상 망설일 이유가 없습니다. 지금 바로 시도해 보세요!

강의 내용

간단한 예제