MobX vs MobX-State-Tree
- 앱이 커질 경우 관리해야하는 state가 늘어나며 그에 따라 여러개의 store로 분리해서 사용하게 되는데, 그러면서 앱의 다른 영역들 간의 커뮤니케이션이 복잡해지기 시작한다. 이때 mobx-state-tree를 사용하게 되는데, mobx-state-tree는 mobx를 기반으로 한 state management library이며, 이를 사용함으로써 트리 모델 구조 안에서 state 를 관리함과 동시에 트리의 위 아래로 자유롭게 이동할 수 있다.
MobX is a state management “engine”, and MobX-State-Tree makes it feel a lot more like Redux by giving it structure.
MobX
- unopinionated
- mutable
Mobx-State-Tree
-
타입스크립트에 대한 완벽한 지원이 되고, opinionated하며 snapshot을 통해 immutable하게 사용될 수 있다.
-
MST는 트리구조로 되어있는데 각 트리는 nodes(models)와 leaves(properties)로 구성되어 있다. 데이터가 계층형 구조일 때 사용하면 유리하다.
-
불변성(immutiability)을 위해 snapshot을 사용하며 tree를 바꾸기 위해 actions가 이용되고, memorization(기억)을 위해 views를 사용한다.
-
비동기적 효과, lifecycle method를 지원한다.
MobX-State-Tree는 데이터로 구성된 스토어를 정의하고, 그 데이터의 변화를 observe하며 리렌더를 trigger한다. 또한 actions를 정의할 수 있으며, side-effects를 수행하고, 리액트 컴포넌트에 data의 "views"를 노출해준다.
data validation
- 큰 앱의 경우 다양한 영역을 같은 state로 관리하는 것이 흔한데, MobX-State-Tree에서 data validation을 진행해 실수를 할 경우 error를 던져주기 때문에 mobx에 비해 훨씬 엄격하다.
모델 정의
- mst에서 가장 먼저 해야될 일은 data model을 정의하는 것이다. 이 작업을 통해서 데이터의 shape과 type을 결정하며 데이터와 데이터를 변경시키는 action을 한 location에 둘 수 있다.
- 모델(Model)은 상태(state)의 형태(shape)을 정의하고 타입 유효성 검사를 수행한다.
Store.create()
- Store.create()을 사용하여 model의 instance를 생성하고 최고의 state를 첫번째 인자로 넘겨준다.
