Zustand가 상태를 어떻게 기억하고 관리하는가
1. Zustand는 어떻게 동작하는가?
Zustand는 내부적으로 다음 세 가지 개념을 중심으로 작동합니다.
- store 객체: 상태와 상태를 변경할 수 있는 함수를 담고 있는 저장소
- 구독자(subscribers): 상태 변경을 듣고 반응하는 컴포넌트들
- set 함수: 상태를 변경하고 구독자에게 알려주는 트리거
import { create } from 'zustand';
const useStore = create((set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
}));2. Zustand의 기억력: 상태 저장 방식
Zustand는 내부적으로 Vanilla JS 객체를 사용한 상태 저장소를 가지고 있어요.
즉, 상태는 JS 메모리 안에 있는 평범한 객체에 저장되며, 리액트 상태처럼 리렌더링과 강하게 연결되어 있지 않습니다.
✅ 왜 메모리 기반인가?
- 빠르다: 불필요한 리렌더링을 줄일 수 있음
- 자유롭다: React 외부에서도 상태를 읽고 쓸 수 있음 (예: 유틸함수나 비동기 로직 등)
Zustand는 React의 useState/useReducer가 아닌, 직접 메모리에 접근해서 상태를 관리하는 방식입니다.
3. Zustand는 어떻게 변경을 감지할까?
Zustand는 상태를 직접 변경하고, 이 상태를 구독 중인 컴포넌트에만 변경 사항을 알립니다.
const count = useStore((state) => state.count);
이렇게 쓰면 count만 관찰하게 되는데, 내부적으로는 Object.is(prev, next)를 사용해서 값이 실제로 변경되었는지 확인합니다.
불필요한 리렌더링을 피할 수 있는 구조인 것.
🔍 컴포넌트는 “내가 구독 중인 값이 변하지 않았으면 리렌더링 안 해도 돼”라고 생각하게 되는 구조입니다.
4. 상태는 언제 바뀔까?
Zustand의 상태는 set 함수가 호출될 때 바뀝니다.
이 함수는 내부에서 다음 과정을 거칩니다.
- 기존 상태를 복사
- 새 값과 병합 (shallow merge)
- 바뀐 값이 있을 경우 구독자 호출 (선택적 리렌더링)
set({ count: 5 });
위 코드를 실행하면 Zustand는
- count 값이 바뀌었는지 확인
- 바뀌었다면 count를 구독하는 컴포넌트에게만 업데이트 요청
- 다른 값은 그대로 유지한다.
5. Zustand는 기억을 잃을까?
앱을 새로고침하거나 상태가 리셋되면 기본적으로 Zustand의 상태는 날아갑니다.
하지만 persist 미들웨어를 사용하면 localStorage/sessionStorage에 저장해서 상태를 보존할 수 있습니다.
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
const useStore = create(persist(
(set) => ({
theme: 'light',
setTheme: (t) => set({ theme: t }),
}),
{
name: 'theme-storage',
}
));
이제 사용자의 테마 설정은 브라우저가 꺼져도 살아있을 것 입니다!
마무리하며 🧩
Zustand는 단순한 API 뒤에 꽤 정교한 메커니즘을 갖춘 상태관리 도구입니다.
상태를 "기억하고", "비교하고", "필요할 때만 알리는" 방식은 마치 사람의 뇌처럼 효율적으로 동작합니다.
가볍고, 직관적이고, 빠른 상태 관리가 필요하다면, Zustand를 사용해 보세요!