🎧

프론트엔드 애플리케이션을 개발하다 보면, 컴포넌트 간 상태를 공유하고 변경 사항을 일관성 있게 반영하는 것이 중요한 과제가 된다.

이를 위해 다양한 상태관리 라이브러리가 존재하며, 대표적으로 Redux, Recoil, MobX 등이 있다. 최근에는 보다 단순하고 가벼운 접근 방식을 제공하는 Zustand가 주목받고 있다.

1. Zustand란 무엇인가

https://zustand-demo.pmnd.rs/

Zustand의 공식문서이다.
공식문서에 따르면,

작고, 빠르며 확장 가능한 최소한의 상태 관리 솔루션입니다.
Zustand는 훅(Hooks)에 기반한 편안한 API를 제공합니다. 보일러플레이트 코드가 많거나 특정한 의견(opinion)에 치우치지 않지만, 명시적이고 Flux와 유사한 구조를 유지할 수 있는 충분한 규칙을 가지고 있습니다.

귀엽다고 무시하지 마세요. 발톱이 있습니다!
많은 시간을 들여 흔히 겪는 문제들을 해결했습니다. 예를 들어, 악명 높은 좀비 자식(zombie child) 문제, React의 동시성(concurrency), 서로 다른 렌더러 간의 컨텍스트 손실(context loss) 등을 다룹니다.
React 생태계에서 이러한 모든 문제를 올바르게 처리하는 거의 유일한 상태 관리 라이브러리일지도 모릅니다.

라고 한다.

✔️종합해보면

1. Zustand는 핵심 기능만 제공하는 가벼운 상태 관리 라이브러리

2. Redux처럼 복잡한 설정이나 파일 구조 없이도 쓸 수 있고, 프로젝트 규모가 커져도 무리 없이 확장할 수 있다는 장점

3. React의 useState, useEffect 같은 방식으로 쉽게 사용할 수 있다는 의미

4. 복잡한 action, reducer, dispatch 같은 개념을 강제로 쓰게 하지 않아서 진입 장벽이 낮음

5. 특정 패턴을 강제하지 않지만, Flux 아키텍처처럼 데이터 흐름이 단방향이라 구조가 명확합니다.

6. 좀비 자식 문제(zombie child problem)
→ 상태가 업데이트됐는데 이미 언마운트된 컴포넌트가 옛 데이터를 참조하는 버그를 의미합니다.

7. React 동시성(Concurrency)
→ React 18의 concurrent mode에서도 상태 관리가 안전하게 동작하도록 설계됨.

8. 컨텍스트 손실(Context loss)
→ React Native, Web, Three.js 같이 렌더러가 혼합된 환경에서도 상태를 안전하게 공유 가능.

요약: Zustand는 단순하지만 깊이 있는 상태 관리 라이브러리이고, React에서 발생하는 까다로운 버그 상황도 대부분 해결해주는 거의 유일한 선택지이다

2. 기본사용방법

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}))

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} bears around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

1. create()
• Zustand 스토어를 만드는 최초 함수.
• 인자로 전달하는 함수 안에서 상태(state)와 상태 변경 로직(setter)을 정의합니다.


2. set()
• 상태를 변경하는 함수.
• 부분 업데이트 가능(merge 동작).

3. get()
• 스토어의 현재 상태를 즉시 읽는 함수.
• React 훅 없이도 외부에서 상태를 읽을 수 있음.

4. subscribe()
• 특정 상태 변화에 대해 리스너 등록.
• React 컴포넌트 바깥에서도 상태 변화를 감지 가능.

const unsubscribe = useStore.subscribe(state => {
  console.log('count changed:', state.count);
});

unsubscribe(); // 구독 해제

다른 라이브러리들과의 차이점 (Zustand vs 다른 상태관리 라이브러리 비교)

우리 팀은 현재 상태관리 라이브러리의 과도기를 겪고 있다.
과거 프로젝트 요구사항과 팀원의 선호도 차이로 인해 Jotai, Redux, Recoil이 혼합된 구조가 형성되었고, 그 결과 전역 상태의 흐름이 복잡해지고 유지보수가 점점 어려워졌다.

이에 따라 우리는 상태관리 방식을 Zustand로 통합하기로 결정했다.

Zustand는 비교적 가벼우면서도 명시적이고 확장 가능한 구조를 제공하므로, 기존에 분산된 상태를 한 곳으로 모으기에 적합하다고 판단했다.

다만, 통합 과정에서 고려해야 할 중요한 점이 있다.

현재 Redux에서는 비동기적 라우팅 처리 로직이 전역에서 관리되고 있는데, 이 기능을 단순히 Zustand로 옮기는 것만으로는 동일한 유연성을 확보하기 어렵다.
Zustand에서는 이러한 비동기 흐름을 미들웨어 또는 subscribe 기반 이벤트 처리로 재구성해야 하며, 상태 변경과 라우팅 전환이 끊김 없이 동작하도록 설계하는 것이 핵심 과제였다.

다음 글에서는 어떻게 이러한 과제들을 적용시켰는지 써보도록 하겠다!