React로 프로젝트를 진행하다 보면 상태 관리가 점점 부담이 되는 순간이 온다. 처음에는 props로 충분하다고 생각했지만, 컴포넌트가 늘어나면서 props drilling이 깊어지고, Context API는 생각보다 구조가 복잡해졌다. Redux는 안정적이지만 작은 프로젝트에 적용하기에는 설정 비용이 꽤 크다는 느낌을 받았다.
그래서 이번 프로젝트에서는 가볍고 직관적인 전역 상태 관리 도구를 사용해보고 싶다는 생각을 하게 되었고 앱잼 팀원들과의 회의를 거쳐 Zustand를 최종적으로 선택하게 되었다. 이 글은 앱잼 프로젝트에 Zustand를 적용하기 위해 기술적으로 정리하고, 직접 적용한 과정을 공유하기 위함이다.
Zustand는 Flux 패턴을 기반으로 한 경량 상태 관리 라이브러리로, React Hook 형태로 전역 상태를 관리할 수 있도록 도와준다. 가장 큰 특징은 store가 컴포넌트 트리 안에 존재하는 것이 아니라 외부에 독립적으로 존재한다는 점이다. 컴포넌트는 필요한 상태만 선택적으로 구독하고, 상태가 변경되었을 때 실제로 사용하는 값이 바뀐 컴포넌트만 리렌더링된다.
Context API처럼 Provider로 감쌀 필요도 없고, Redux처럼 액션과 리듀서를 분리할 필요도 없다. 상태를 정의하고 바로 사용하는 흐름이 굉장히 단순하다.
[ Store ] → (subscribe) → [ Component ]
👉 React Context와 달리 상태 변경 ≠ 전체 리렌더링
구조를 이해하기 위해 가장 기본적인 counter store를 예제로 실습을 진행해보겠다.
Zustand에서 store는 create 함수로 생성한다. 이 함수 안에서는 **상태(state)**와 **상태를 변경하는 함수(action)**를 함께 정의한다. Redux처럼 액션과 리듀서를 분리하지 않고, 한 곳에서 상태 흐름을 모두 확인할 수 있다는 점이 특징이다.