MobX의 반응형 state 모델은 Redux와 어떻게 다른가요?

Question

Accepted Answer

**MobX**는 Redux와 근본적으로 다른 접근을 취합니다: 명시적인 action과 immutable 갱신 대신, **투명한 반응성(transparent reactivity)**을 사용합니다 — observable state를 직접 변경하면 MobX가 의존성을 자동으로 추적하고 그것에 의존하는 모든 것을 갱신합니다(Vue의 반응성이나 Signals와 유사). ## MobX — 변경 가능한 observable, 자동 추적 ```js import { makeAutoObservable } from "mobx"; import { observer } from "mobx-react-lite"; class CounterStore { count = 0; constructor() { makeAutoObservable(this); } // 필드를 observable로 만듦 increment() { this.count++; } // ✅ 직접 변경 — action 없음, immutability 없음 get double() { return this.count * 2; } // computed — 자동 파생 & 캐시됨 } const store = new CounterStore(); // observer 컴포넌트는 자신이 읽는 observable이 바뀌면 자동 리렌더링 const Counter = observer(() => ( )); ``` state를 직접 변경하고(`this.count++`), MobX는 `count`를 읽는 `observer` 컴포넌트만 자동으로 리렌더링합니다. reducer, action, dispatch, 수동 immutability가 없습니다. ## 철학상의 핵심 차이 ```text Redux MobX 갱신 immutable(새 state 반환) mutable(제자리에서 변경) 메커니즘 명시적 action + reducer 투명한 반응형 추적 데이터 흐름 엄격한 단방향, 예측 가능 자동 의존성 반응 보일러플레이트 더 많음 더 적음 파생 값 selector(수동) computed(자동, 캐시됨) 멘탈 모델 함수형 / 명시적 OOP / 반응형 / 암시적 ``` ## MobX가 의존성을 추적하는 방식 ```text MobX는 observable을 프록시로 감쌉니다. observer 컴포넌트가 렌더링될 때, MobX는 그것이 어떤 observable을 READ했는지 기록합니다. 그중 하나가 바뀌면, MobX는 정확히 그 컴포넌트만 다시 실행합니다 — 세밀하고, 자동이며, selector가 필요 없습니다. ``` 이는 Vue의 반응성과 Signals를 뒷받침하는 동일한 읽을 때 추적/쓸 때 유발 아이디어입니다. ## 절충 ```text MobX 장점: 적은 보일러플레이트, 자동 반응성, 쉬운 파생 값, OOP 친화적 MobX 단점: "마법"이 Redux의 로깅된 action보다 덜 명시적/추적 가능할 수 있음; 변경 기반 흐름은 순수 reducer보다 타임 트래블 디버깅이 어려움 ``` ## 왜 중요한가 MobX는 state management의 **반응형/변경 가능** 학파를 대표합니다 — Redux의 **명시적/immutable** 접근의 반대입니다. 이 대조를 이해하면 핵심 설계 축이 명확해집니다: 명시적이고 예측 가능(Redux: 모든 action 추적, 하지만 더 많은 보일러플레이트) 대 자동이고 간결(MobX: 자유롭게 변경, 더 적은 코드, 하지만 덜 명시적). 동일한 반응형 원칙이 Vue와 Signals를 뒷받침하므로, MobX를 파악하면 state 도구 전체 계열을 밝히고 주어진 프로젝트에 대해 예측 가능성과 편의성 사이에서 고르는 데 도움이 됩니다.