프론트엔드 상태 관리 (Redux, MobX, Zustand)
프론트엔드 개발에서 상태 관리는 필수 요소 중 하나입니다. 컴포넌트 간에 데이터를 공유하고 props drilling을 방지하기 위해 사용하며,
복잡한 애플리케이션에서도 데이터 흐름을 일관되고 예측 가능하게 만들어줍니다. 또한 전역 상태를 한 곳에서 관리함으로써 유지보수성과
확장성을 높입니다.
이를 위해 다양한 상태 관리 라이브러리가 등장했는데, 그중에서도 Redux, MobX, Zustand는 많은 개발자들이 사용하는 대표적인
라이브러리입니다.
Redux
✅ 특징
✔️ Flux 패턴
✔️ 예측 가능한 상태 관리
Redux는 단방향 데이터 흐름과 불변성을 엄격히 지키도록 설계되어 있습니다.
상태가 어떻게 변했는지 추적하기 쉽고, 디버깅과 테스트가 용이합니다.
✔️ 중앙 집중식 Store
모든 앱의 상태를 하나의 Store에서 관리하기 때문에, 여러 컴포넌트 간의 복잡한 데이터 공유나 흐름을 명확하게 컨트롤할 수 있습니다.
✔️ 강력한 개발자 도구
Redux DevTools를 활용하여 액션과 상태 변경 기록을 시간 순으로 추적할 수 있습니다.
✔️ 대규모 프로젝트에 적합
대규모 프로젝트와 협업이 많은 팀에서 일관성을 유지할 수 있습니다.
✅ 장점
- Predictable(예측 가능한) 상태 관리
- Redux DevTools와 같은 디버깅 도구 지원
- 대규모 프로젝트에 적합
✅ 단점
- 보일러플레이트 코드가 많아 학습 곡선이 있음
- 간단한 프로젝트에는 오히려 복잡할 수 있음
❗Flux 패턴
- Facebook에서 복잡한 상태 관리를 위해 고안한 단방향 데이터 흐름(One-way data flow) 아키텍처 패턴입니다.
- 데이터 흐름 구조는 다음과 같습니다.
1️⃣ Action — 상태 변경을 요청하는 객체
2️⃣ Dispatcher — Action을 받아 Store에 전달(Redux에서는 생략됨)
3️⃣ Store — 상태와 로직을 보관, 상태를 변경
4️⃣ View — 상태를 구독하고, UI를 업데이트
MobX
✅ 특징
✔️ Observer 패턴
✔️ 자동 리렌더링(리액티브)
MobX는 Observer 패턴 기반으로 상태가 바뀌면 자동으로 UI가 업데이트됩니다.
불필요한 렌더링을 줄이고, 선언적이고 직관적인 코드를 작성할 수 있습니다.
✔️ 간결한 코드
Redux처럼 Action, Reducer 등 복잡한 구조 없이, observable과 action만으로 상태를 쉽게
정의하고 관리할 수 있습니다.
✔️ 빠른 개발
복잡한 로직 없이 상태를 바로 변경할 수 있기 때문에 간단한 상태 관리에 유리합니다.
✅ 장점
- 리액티브하게 반응하는 UI 구현에 용이
- 작성해야 할 코드가 상대적으로 적고 직관적
- 복잡한 상태 로직을 간단히 처리 가능
✅ 단점
- 디버깅 시 상태 추적이 상대적으로 어려울 수 있음
❗Observer 패턴
- 객체의 상태를 관찰하고, 상태가 변경될 때 자동으로 반응(알림)을 보내는 방식입니다.
- observable(관찰 가능한 상태)과 observer(변화를 감지하고 UI를 업데이트하는 컴포넌트)가 있습니다.
Zustand
✅ 특징
✔️ Flux + Hook 패턴
✔️ 가볍고 간단함
작은 번들 사이즈(1~2KB)와 간단한 API로 가벼운 상태 관리가 필요한 프로젝트에 적합합니다.
✔️ React Hook 친화적
useStore Hook을 통해 상태를 구독/업데이트할 수 있어 React의 함수형 컴포넌트와 유사합니다.
✔️ 자유로운 설계
Redux처럼 엄격한 규칙이 없고, MobX처럼 자동화된 관찰 패턴도 없지만 필요한 만큼만 상태를 관리하며 설계를 유연하게 할 수 있습니다.
✔️ 빠른 러닝 커브
Redux보다 배우기 쉽고, MobX보다 단순해서 소규모 또는 단기 프로젝트에 적합합니다.
✅ 장점
- 작은 크기로 성능 부담이 적음
- 코드가 간결하고, 사용법이 React Hook과 비슷하여 직관적
- 상태 분할과 로직 작성이 자유롭고 유연함
✅ 단점
- 대규모 프로젝트에 적용 시 아키텍처 설계에 고민 필요
- 상대적으로 커뮤니티와 생태계가 작음(아직 성장 중인 상태)
❗Flux + Hook 패턴
- Redux처럼 엄격한 구조는 아니며 훨씬 자유롭게 상태를 선언하고 수정할 수 있습니다. React의 Hook 패턴과 결합되어 더 간단하고 유연합니다.
- Store를 생성할 때 useStore 훅을 사용하여 상태를 구독하고 업데이트합니다.
⭐발표자 : 이예은님
프론트엔드 상태 관리 (Redux, MobX, Zustand)
프론트엔드 개발에서 상태 관리는 필수 요소 중 하나입니다. 컴포넌트 간에 데이터를 공유하고 props drilling을 방지하기 위해 사용하며,
복잡한 애플리케이션에서도 데이터 흐름을 일관되고 예측 가능하게 만들어줍니다. 또한 전역 상태를 한 곳에서 관리함으로써 유지보수성과
확장성을 높입니다.
이를 위해 다양한 상태 관리 라이브러리가 등장했는데, 그중에서도 Redux, MobX, Zustand는 많은 개발자들이 사용하는 대표적인
라이브러리입니다.
Redux
✅ 특징
✔️ Flux 패턴
✔️ 예측 가능한 상태 관리
Redux는 단방향 데이터 흐름과 불변성을 엄격히 지키도록 설계되어 있습니다.
상태가 어떻게 변했는지 추적하기 쉽고, 디버깅과 테스트가 용이합니다.
✔️ 중앙 집중식 Store
모든 앱의 상태를 하나의 Store에서 관리하기 때문에, 여러 컴포넌트 간의 복잡한 데이터 공유나 흐름을 명확하게 컨트롤할 수 있습니다.
✔️ 강력한 개발자 도구
Redux DevTools를 활용하여 액션과 상태 변경 기록을 시간 순으로 추적할 수 있습니다.
✔️ 대규모 프로젝트에 적합
대규모 프로젝트와 협업이 많은 팀에서 일관성을 유지할 수 있습니다.
✅ 장점
- Predictable(예측 가능한) 상태 관리
- Redux DevTools와 같은 디버깅 도구 지원
- 대규모 프로젝트에 적합
✅ 단점
- 보일러플레이트 코드가 많아 학습 곡선이 있음
- 간단한 프로젝트에는 오히려 복잡할 수 있음
❗Flux 패턴
- Facebook에서 복잡한 상태 관리를 위해 고안한 단방향 데이터 흐름(One-way data flow) 아키텍처 패턴입니다.
- 데이터 흐름 구조는 다음과 같습니다.
1️⃣ Action — 상태 변경을 요청하는 객체
2️⃣ Dispatcher — Action을 받아 Store에 전달(Redux에서는 생략됨)
3️⃣ Store — 상태와 로직을 보관, 상태를 변경
4️⃣ View — 상태를 구독하고, UI를 업데이트
MobX
✅ 특징
✔️ Observer 패턴
✔️ 자동 리렌더링(리액티브)
MobX는 Observer 패턴 기반으로 상태가 바뀌면 자동으로 UI가 업데이트됩니다.
불필요한 렌더링을 줄이고, 선언적이고 직관적인 코드를 작성할 수 있습니다.
✔️ 간결한 코드
Redux처럼 Action, Reducer 등 복잡한 구조 없이, observable과 action만으로 상태를 쉽게
정의하고 관리할 수 있습니다.
✔️ 빠른 개발
복잡한 로직 없이 상태를 바로 변경할 수 있기 때문에 간단한 상태 관리에 유리합니다.
✅ 장점
- 리액티브하게 반응하는 UI 구현에 용이
- 작성해야 할 코드가 상대적으로 적고 직관적
- 복잡한 상태 로직을 간단히 처리 가능
✅ 단점
- 디버깅 시 상태 추적이 상대적으로 어려울 수 있음
❗Observer 패턴
- 객체의 상태를 관찰하고, 상태가 변경될 때 자동으로 반응(알림)을 보내는 방식입니다.
- observable(관찰 가능한 상태)과 observer(변화를 감지하고 UI를 업데이트하는 컴포넌트)가 있습니다.
Zustand
✅ 특징
✔️ Flux + Hook 패턴
✔️ 가볍고 간단함
작은 번들 사이즈(1~2KB)와 간단한 API로 가벼운 상태 관리가 필요한 프로젝트에 적합합니다.
✔️ React Hook 친화적
useStore Hook을 통해 상태를 구독/업데이트할 수 있어 React의 함수형 컴포넌트와 유사합니다.
✔️ 자유로운 설계
Redux처럼 엄격한 규칙이 없고, MobX처럼 자동화된 관찰 패턴도 없지만 필요한 만큼만 상태를 관리하며 설계를 유연하게 할 수 있습니다.
✔️ 빠른 러닝 커브
Redux보다 배우기 쉽고, MobX보다 단순해서 소규모 또는 단기 프로젝트에 적합합니다.
✅ 장점
- 작은 크기로 성능 부담이 적음
- 코드가 간결하고, 사용법이 React Hook과 비슷하여 직관적
- 상태 분할과 로직 작성이 자유롭고 유연함
✅ 단점
- 대규모 프로젝트에 적용 시 아키텍처 설계에 고민 필요
- 상대적으로 커뮤니티와 생태계가 작음(아직 성장 중인 상태)
❗Flux + Hook 패턴
- Redux처럼 엄격한 구조는 아니며 훨씬 자유롭게 상태를 선언하고 수정할 수 있습니다. React의 Hook 패턴과 결합되어 더 간단하고 유연합니다.
- Store를 생성할 때 useStore 훅을 사용하여 상태를 구독하고 업데이트합니다.
⭐발표자 : 이예은님