Atom: Jotai의 상태 단위

Jotai에서 상태는 아톰으로 나뉩니다. 아톰은 작고 독립적인 반응형 상태 조각입니다. 각 아톰은 하나의 값을 보유하며 atom(initialValue)을 사용해 컴포넌트 외부에서 생성합니다.

이는 상태를 하나의 큰 저장소 객체로 관리하는 대신 의미 있는 가장 작은 단위로 나누는 사고방식을 반영합니다.

아톰의 값이 변경되면 해당 아톰을 구독한 컴포넌트만 다시 렌더링됩니다. 다른 아톰을 읽는 컴포넌트에는 영향이 없습니다.

이 세밀한 반응성은 어떤 변경이든 모든 소비자를 다시 렌더링하는 React Context에 비해 Jotai가 가진 핵심 장점입니다.

모듈 수준에서 아톰을 정의합니다. const countAtom = atom(0)과 같이 작성합니다. 이렇게 하면 렌더링이 반복되어도 아톰 식별성이 안정적으로 유지되며, 각 컴포넌트가 마운트될 때마다 아톰이 다시 생성되지 않습니다.

아톰은 가벼운 참조이며 자체 값을 보유하지 않습니다. 값은 Jotai 저장소에 있습니다.

Jotai는 기본적으로 암시적인 전역 저장소를 사용합니다. 아톰을 사용하기 위해 앱을 Provider로 감쌀 필요가 없으므로 기존 프로젝트에 쉽게 도입할 수 있습니다.

프롭을 여러 단계로 전달하거나 컨텍스트를 연결하지 않아도 트리의 모든 컴포넌트에서 아톰에 전역적으로 접근할 수 있습니다.

동일한 컴포넌트 트리의 독립적인 인스턴스가 여러 개 필요할 때(예: 각자 고유한 폼 상태 아톰을 사용하는 두 개의 별도 폼) 각각을 Jotai Provider로 감쌉니다. 각 Provider는 격리된 저장소를 생성합니다.

이는 마이크로 프런트엔드 아키텍처나 서로 독립적인 상태 영역이 있는 복잡한 페이지 레이아웃에서 유용합니다.

전역 저장소는 애플리케이션 수명 동안 아톰을 유지합니다. 범위가 지정된 Provider 저장소는 Provider가 마운트 해제될 때 초기화되므로, 전역적으로 유지할 필요가 없는 모달 대화 상자나 페이지 수준 상태에 적합합니다.

서버 측 렌더링을 격리하기 위해 사용자 지정 저장소 인스턴스를 Provider에 전달할 수도 있습니다.

Zustand는 불필요한 다시 렌더링을 방지하기 위해 선택자를 사용하는 하나의 저장소 객체를 사용합니다. Jotai는 상태를 아톰으로 나누며 각 컴포넌트는 자신이 읽는 아톰만 구독합니다.

Jotai는 세밀한 UI 상태(개별 입력 값, 토글 플래그)에 더 자연스럽고, Zustand는 규모가 크고 서로 연결된 애플리케이션 상태에 잘 맞습니다.

React Context는 컨텍스트 값이 변경될 때마다 모든 소비자 컴포넌트를 다시 렌더링합니다. 소비자 컴포넌트가 컨텍스트 객체의 한 필드에만 관심이 있어도 마찬가지입니다.

Jotai는 이 문제를 해결합니다. useAtom(nameAtom)을 사용하는 컴포넌트는 다른 아톰이 아니라 nameAtom이 변경될 때만 다시 렌더링됩니다.

Jotai는 기본적으로 Object.is 비교를 사용하여 아톰의 값이 변경되었는지 판단합니다. 아톰에 이미 보유한 값과 동일한 값을 설정하면 다시 렌더링되지 않습니다.

복잡한 객체에는 selectAtom 유틸리티를 사용하여 큰 아톰에서 안정적인 원시 값을 도출하면, 관련 없는 필드가 변경될 때 다시 렌더링되는 것을 방지할 수 있습니다.

useState는 하나의 컴포넌트에 한정됩니다. 아톰은 명시적으로 전달하지 않아도 전체 컴포넌트 트리에서 공유됩니다. 두 형제 컴포넌트가 같은 아톰을 읽으면 자동으로 동기화된 상태를 유지합니다.

이를 통해 컴포넌트 간 공유를 위해 상태를 상위로 올릴 필요가 없어지면서도 다시 렌더링을 최소화할 수 있습니다.

일반적인 아톰은 const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null)과 같습니다. 이러한 아톰은 한 번 정의한 후 애플리케이션 어디에서나 가져올 수 있습니다.

각 아톰은 독립적이므로 cartItemsAtom을 업데이트해도 themeAtom만 읽는 컴포넌트에서는 다시 렌더링이 발생하지 않습니다.

Jotai는 재렌더링 측면에서 React Context와 어떻게 다른가요?

atom은 Jotai에서 상태의 기본 단위이며, 컴포넌트 외부에서 atom(initialValue)로 생성되고 기본적으로 Provider 없이 트리 전체에서 공유됩니다. atom이 변경되면 해당 atom의 구독자만 재렌더링됩니다.

이 세밀한 반응성이 React Context에 비해 Jotai가 가진 핵심 장점이며, atom별 구독 모델은 Zustand의 단일 스토어 방식과 다릅니다.