Jotai, Zustand, Context 비교: 무엇을 언제 사용할까

React Context는 현재 테마, 사용자 로캘, 인증 상태 또는 디자인 시스템 토큰처럼 자주 변경되지 않는 전역 값에 적합합니다. 이러한 값은 한 번 설정된 후 세션 중에 거의 변경되지 않습니다.

이 API는 React에 내장되어 있고 종속성이 필요하지 않으며, "이 값은 전역으로 공유됩니다"라는 의미를 팀에 명확하게 전달합니다.

컨텍스트 값 객체가 변경되면 필드 하나만 변경되어도 모든 소비 컴포넌트가 재렌더링됩니다. 안정적인 전역 설정에는 괜찮지만, 폼 입력이나 UI 애니메이션 플래그처럼 변경 빈도가 높은 상태에는 치명적입니다.

컨텍스트를 더 작은 단위로 나누면 문제가 일부 완화되지만, 규모가 커질수록 이 패턴을 관리하기 어려워집니다.

Zustand는 사용자 설정, 장바구니, 탐색 기록 또는 다단계 마법사 상태처럼 적당한 빈도로 변경되는 전역 애플리케이션 상태에 적합합니다. 선택자 기반 구독을 사용하므로 관련 없는 상태 조각이 변경되어도 재렌더링되지 않습니다.

스토어 기반 모델은 Redux 사용자에게 익숙하며 관련 상태를 한곳에 모아 관리합니다.

Zustand 스토어는 useBoundStore 훅을 내보냅니다. 선택자를 전달하세요: useStore(state => state.cart)을 사용하면 cart 상태 조각만 구독할 수 있습니다. 서로 다른 선택자를 사용하는 컴포넌트는 독립적이므로, cart 선택자를 사용하는 컴포넌트는 사용자 이름이 변경되어도 재렌더링되지 않습니다.

따라서 Zustand는 Jotai와 비슷한 상태 조각별 효율성을 제공하면서도 더 명령형인 API를 제공합니다.

Jotai는 개별 폼 필드 값, 행별 선택 플래그, UI 토글 상태 또는 실시간 데이터 구독처럼 작고 독립적인 값이 자주 변경되는 세밀한 반응형 상태에 적합합니다.

값마다 atom을 두는 모델은 컴포넌트 트리의 서로 다른 부분에서 완전히 다른 상태 조각을 필요로 할 때 자연스럽게 사용할 수 있습니다.

Jotai의 번들은 Zustand보다 작습니다. Jotai는 미들웨어 시스템이나 개발자 도구의 기본 제공 기능이 없어 더 적은 기능을 제공하기 때문입니다. Jotai의 API는 useState와 유사하고 useAtom은 [value, setter]를 반환하므로 React 개발자가 익혀야 할 내용이 적습니다.

Zustand의 API는 Redux와 더 비슷합니다. 스토어를 정의하고, 훅을 내보내며, 선택자를 사용합니다. 두 라이브러리 모두 TypeScript를 훌륭하게 지원합니다.

Jotai와 Zustand 모두 적절한 수화 전략을 사용해 서버 측 렌더링을 지원합니다. Jotai는 SSR에서 사용자 지정 스토어와 Provider를 사용하고, Zustand는 서버 인스턴스를 위해 createStore를 사용합니다.

두 라이브러리 모두 TypeScript 제네릭을 우선적으로 지원하므로 수동 타입 주석 없이도 atom과 스토어 값의 타입을 완전히 추론할 수 있습니다.

실제 앱에서는 세 가지를 함께 사용하는 경우가 많습니다. 정적 설정(API 기본 URL, 기능 플래그)에는 React Context를, 대화형 클라이언트 상태에는 Jotai 또는 Zustand를, 서버에서 가져온 데이터에는 React Query 또는 SWR을 사용합니다.

이러한 계층은 서로 충돌하지 않습니다. 각 상태 조각의 특성에 따라 의도적으로 조합하는 것이 아키텍처의 모범 사례입니다.

팀에 Redux 경험이 있다면 Zustand의 스토어 모델을 자연스럽게 느낄 수 있습니다. 팀이 React에 매우 익숙하다면 Jotai의 useState와 유사한 API가 가장 완만한 학습 곡선을 제공합니다.

대부분의 애플리케이션에서는 미세한 성능 차이보다 팀의 익숙함이 더 중요합니다.

토글 몇 개로 구성된 단순한 페이지 상태에는 useState나 Context면 충분합니다. 중간 규모 앱의 컴포넌트 간 상태에는 Zustand나 Jotai를 사용하면 됩니다. 서로 독립적인 반응형 값이 수십 개 있는 고도로 상호작용적인 UI에는 Jotai가 특히 적합합니다.

캐싱, 백그라운드 새로 고침, 낙관적 업데이트가 필요한 복잡한 서버 데이터에는 어떤 클라이언트 상태 라이브러리든 React Query와 함께 사용하면 됩니다.

정적이거나 거의 변경되지 않는 전역 값에는 Context를 사용합니다. 업데이트 빈도가 보통인 중앙 집중식 애플리케이션 상태에는 Zustand를 사용합니다. 독립적인 구독이 많고 원자 단위로 세밀하게 반응하는 상태에는 Jotai를 사용합니다. 서버 상태에는 React Query나 SWR을 사용합니다.

이 범주들은 서로 배타적이지 않습니다. 상태 유형에 따라 여러 방식을 계층적으로 조합하면 깔끔하고 성능이 좋은 아키텍처를 만들 수 있습니다.

상태 관리에서 React Context보다 Jotai를 선택하는 것이 더 나은 경우는 언제입니까?

정적인 전역 구성에는 React Context가 가장 적합하고, 선택자 기반 구독을 사용하는 중앙 집중식 앱 상태에는 Zustand가 적합하며, 서로 독립적인 값이 자주 업데이트되는 세밀한 원자 상태에는 Jotai가 적합합니다. 이 세 가지는 모두 React Query와 같은 서버 상태 라이브러리를 보완합니다.

업데이트 빈도, 상태 복잡성, 팀의 익숙함을 기준으로 선택합니다. 상태 범주에 따라 세 가지를 모두 조합하는 방식은 실제 운영 환경에서도 타당하고 흔히 사용되는 패턴입니다.