MobX
전 글에서는 왜 React에서 불변성을 지켜야하는지에 대해서 알아보았습니다. 이번에는 상태 관리 라이브러리 MobX 에 대해서 알아보겠습니다.
MobX의 README
Anything that can be derived from the application state, should be derived. Automatically.
어플리케이션의 상태에서 파생될 수 있는 모든 것은 자동으로 파생되어야 한다.
MobX는 Observer 패턴을 사용하여 상태 데이터를 관찰하여 변경되었을때 반응할 수 있도록 도와주는 라이브러리 입니다.
불변하게 변경하지 않는다.
mobx의 특징으로는 상태를 불변하게 변경하지 않는데 다음과 같은 이유가 있습니다.
- observable 배열에 item을 추가하는 경우 변경 불가능한 방식으로 항목을 추가하면 전체 배열이 다시 렌더링하는 때도 있습니다.
- mobx에서는 상태를 관찰 가능(observable)하게 관리하기 때문에 observable 데이터를 업데이트할 때 불변의 개념을 사용하면 안됩니다.
mobx가 상태를 가변하게 업데이트하기 때문에 상태를 추적하거나 저장할 때 문제가 될 수 있는데 mobx에서는 mobx-state-tree 라이브러리를 제공하여 이러한 문제들을 해결합니다.
Mobx-state-tree란?
Mobx-sate-tree는 mobx를 기반으로 한 state container 시스템이다. mobx-state-tree를 씀으로써 트리 모델 구조 안에서 state를 관리함과 동시에 트리 구조에서 자유롭게 위아래로 이동할 수 있습니다.
mobx-state-tree은 상태를 가변하게 관리하지만, immutable snapshot을 보장하며, 스냅샷을 저장하여 상태를 저장하거나 되돌릴 수 있습니다.
참조
[구보현 블로그]
https://bohyeon-n.github.io/deploy/react/react_immutable.html
