원자적 state 모델(atomic state model)(Jotai, Recoil)은 하나의 큰 하향식 store(Redux)나 단일 context가 아니라, atom이라 불리는 작고 독립적인 단위들을 상향식으로 합성하여 글로벌 state를 구축합니다. 컴포넌트는 개별 atom을 구독하고 그것이 바뀔 때만 리렌더링됩니다.
{ atom, useAtom } ;
countAtom = ();
nameAtom = ();
각 atom은 자기완결적인 state 조각입니다. 필요한 만큼 많이 생성하며, 각각 독자적으로 주소 지정 가능합니다.
// 파생 atom은 다른 atom으로부터 계산되며, 의존성이 바뀌면 재계산됨
const doubleAtom = atom((get) => get(countAtom) * 2);
const greetingAtom = atom((get) => `Hello, ${get(nameAtom)}`);
// 쓰기 가능한 파생 atom
const upperNameAtom = atom(
(get) => get(nameAtom).toUpperCase(),
(get, set, newVal) => set(nameAtom, newVal.toLowerCase()),
);
atom은 의존성 그래프로 합성됩니다 — 파생 atom은 자신이 읽는 atom이 바뀌면 스프레드시트처럼 자동으로 갱신됩니다.
function Counter() {
const [count, setCount] = useAtom(countAtom); // 글로벌이지만 useState 같은 API
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
function Display() {
const [double] = useAtom(doubleAtom); // doubleAtom이 바뀔 때만 리렌더링
}
Redux(하향식): 하나의 큰 state 트리; 거기서 슬라이스/selector를 잘라냄
원자적(상향식): 작은 atom으로 시작; 그것을 위로 합성하여 파생 state로
세밀함: 각 atom이 독립적으로 구독 가능 → 자연스럽게 세밀한 리렌더링
(countAtom을 쓰는 컴포넌트는 nameAtom 변경을 무시함)
✓ 기본적으로 세밀한 리렌더링(사용하는 atom만 정확히 구독)
✓ selector 보일러플레이트 없음; 파생 state는 그냥 또 다른 atom
✓ Context의 "모든 것 리렌더링" 문제를 해결
✓ 자연스럽게 많은 독립 조각으로 분해되는 state에 적합
✗ 많은 atom은 하나의 중앙 store보다 정리/추적이 어려울 수 있음
✗ Redux보다 구조가 덜 엄격함(팀에 따라 장점일 수도 단점일 수도)
원자적 모델은 Redux의 하향식 구조를 뒤집는, 점점 인기를 얻는 별개의 글로벌 state 접근법입니다: 큰 store를 슬라이스하는 대신 작은 atom을 위로 합성합니다.
내장된 세밀함은 selector 없이도 효율적이고 표적화된 리렌더링을 제공합니다 — Context의 성능 문제를 직접 해결합니다.
atom(그리고 파생 atom)을 이해하면 단일 store(Redux/Zustand) 및 반응형(MobX/Signals) 모델과 함께 state management 설계 공간에 대한 지식을 완성하여, 앱의 state 형태에 가장 잘 맞는 패러다임을 고르는 데 도움이 됩니다.