Flux inspired practice

김동현·2026년 3월 4일

zustand 공식문서 번역

목록 보기

18/19

안녕하세요! 프론트엔드 개발자 양성 강사입니다. Zustand 공식 문서를 통해 깊이 있게 공부하시려는 모습이 정말 멋지네요!

영어로 된 문서라 조금 답답하셨을 텐데, 제가 딱딱한 번역투가 아니라 우리가 평소에 대화하듯이 친근하게, 그리고 실무에서 우러나오는 팁까지 듬뿍 담아서 번역해 드릴게요. 원본 내용은 하나도 빠짐없이 담았으니 안심하고 따라오세요!

Flux에 영감을 받은 프랙티스 (Flux inspired practice)

Zustand는 개발자에게 "무조건 이렇게 해라!"라고 강제하는(unopinionated) 라이브러리는 아니지만, 저희가 강력하게 추천하는 몇 가지 패턴들이 있어요.
이 패턴들은 원래 Flux나 비교적 최근의 Redux에서 사용되는 관행들에서 영감을 받았답니다. 그래서 만약 다른 상태 관리 라이브러리를 사용하다 오셨다면, 아주 편안하고 친숙하게 느껴지실 거예요.

💡 강사의 보충 설명: > Flux 아키텍처는 데이터가 항상 한 방향(단방향)으로만 흐르도록 만들어서 상태 변화를 예측 가능하고 쉽게 추적할 수 있도록 돕는 아주 훌륭한 패턴이에요. React 생태계를 이해하는 데 있어 아주 중요한 개념이죠!

하지만 Zustand는 몇 가지 근본적인 부분에서 다른 라이브러리들과 차이가 있기 때문에, 사용되는 용어들이 다른 라이브러리들과 완벽하게 1:1로 들어맞지 않을 수도 있다는 점은 미리 기억해 두세요!

권장하는 패턴들 (Recommended patterns)

단일 스토어 (Single store)

여러분의 애플리케이션의 모든 전역 상태(global state)는 단 하나의 Zustand 스토어 안에 모아두는 것이 좋습니다.

앱의 규모가 아주 크다고요? 걱정하지 마세요. Zustand는 거대한 스토어를 여러 조각(slices)으로 나누는 패턴도 훌륭하게 지원하거든요!

🧑‍🏫 강사의 실무 팁:
실무에서 프로젝트가 커지면 스토어 하나에 모든 코드를 때려 넣을 경우 코드가 수천 줄이 넘어가게 됩니다. 이때 'Slice 패턴'을 사용하면 사용자 정보 처리 slice, UI 상태 처리 slice 등 도메인별로 코드를 분리할 수 있어서 유지보수성이 엄청나게 좋아져요!

스토어 업데이트에는 `set` / `setState` 사용하기 (Use `set` / `setState` to update the store)

스토어의 상태를 변경할 때는 반드시 set (또는 setState) 함수를 사용하셔야 해요.
set (그리고 setState) 함수는 우리가 전달한 업데이트 내용이 기존 상태와 올바르게 병합(merge)되도록 보장해 주고, 이 상태를 지켜보고 있는(구독 중인) 컴포넌트들(listeners)에게도 적절하게 알림을 보내서 리렌더링을 일으키거든요.

🧑‍🏫 강사의 실무 팁:
React에서 useState를 쓸 때 상태 값을 직접 수정하지 않는 것처럼, Zustand에서도 state.count = 1처럼 직접 값을 변경(mutate)하면 절대 안 됩니다! 항상 불변성을 유지하며 set을 통해 새로운 상태를 덮어씌워야 컴포넌트가 정상적으로 반응합니다.

스토어 액션 같이 두기 (Colocate store actions)

Zustand에서는 다른 Flux 계열 라이브러리들에서 흔히 쓰이는 복잡한 dispatch 액션이나 reducer가 없어도 상태를 쉽게 업데이트할 수 있어요.
상태를 변경하는 이런 '스토어 액션(함수)'들은 아래 코드에서 볼 수 있듯이 스토어 안에 직접 선언해서 추가할 수 있답니다.

선택 사항이긴 하지만, setState를 사용하면 액션들을 스토어 외부에 배치하는 것도 가능해요!

const useBoundStore = create((set) => ({
  storeSliceA: ...,
  storeSliceB: ...,
  storeSliceC: ...,
  updateX: () => set(...),
  updateY: () => set(...),
}))

🧑‍🏫 강사의 보충 설명:
데이터(상태)와 그 데이터를 조작하는 함수(액션)를 하나의 공간에 같이 모아두는 것(Colocate)을 의미해요. 이렇게 하면 "이 상태를 변경하려면 어떤 함수를 찾아야 하지?" 하고 코드를 헤맬 필요가 없어서 직관적이고 개발 속도도 훨씬 빨라집니다.

Redux와 유사한 패턴 (Redux-like patterns)

만약 "나는 Redux 스타일의 reducer 패턴 없이는 개발 못 해!" 하시는 분들이라면, 스토어의 최상단 레벨에 직접 dispatch 함수를 정의해서 사용하실 수도 있어요.

const types = { increase: 'INCREASE', decrease: 'DECREASE' }

const reducer = (state, { type, by = 1 }) => {
  switch (type) {
    case types.increase:
      return { grumpiness: state.grumpiness + by }
    case types.decrease:
      return { grumpiness: state.grumpiness - by }
  }
}

const useGrumpyStore = create((set) => ({
  grumpiness: 0,
  dispatch: (args) => set((state) => reducer(state, args)),
}))

const dispatch = useGrumpyStore((state) => state.dispatch)
dispatch({ type: types.increase, by: 2 })

이것뿐만이 아닙니다. 저희가 제공하는 redux 미들웨어를 사용하는 방법도 있어요. 이 미들웨어는 메인 reducer를 연결해 주고, 초기 상태를 설정해 주며, 상태 객체 자체와 순수(vanilla) API에 dispatch 함수를 알아서 쏙 추가해 준답니다.

import { redux } from 'zustand/middleware'

const useReduxStore = create(redux(reducer, initialState))

스토어를 업데이트하는 또 다른 방식으로는, 상태를 변경하는 함수들을 랩핑(wrapping)하는 별도의 함수를 만드는 방법이 있어요. 이 함수들을 통해 HTTP 통신 같은 액션의 사이드 이펙트(side-effects)를 처리할 수도 있죠. Zustand를 React 컴포넌트 밖에서 비반응형(non-reactive)으로 읽고 쓰는 방법이 궁금하시다면, 공식 Readme의 해당 섹션을 참고해 주세요.

🧑‍🏫 강사의 실무 팁:
팀원들이 기존에 Redux에 아주 익숙하거나, 기존의 Redux 프로젝트를 Zustand로 마이그레이션할 때 이런 Redux-like 패턴이 아주 유용합니다. 하지만 처음부터 시작하는 프로젝트라면 Zustand의 가볍고 단순한 본래 매력을 먼저 느껴보시길 추천해요!