MobX는 전역 상태 관리 라이브러리다. 모든 상태변화를 일어나는 부분을 자동 추적해주는 역할을 한다. Redux와 주로 비교 되고는 한다.
observable
: 추적 가능한 state 정의action
: state를 변경하는 메소드computed
: state와 캐시로부터 새로운 결과를 반환observable은 makeObservable
, makeAutoObservable
그리고 observable
이 세 가지가 있으며, 모두 추적 가능한 상태의 state로 만들어준다.
makeObservable
은 주로 class의 this와 많이 사용된다.
makeAutoObservable
은 makeObservable
와 거의 비슷하지만, class에서 super나 subclassed가 있을 경우 사용할 수 없다.
make(Auto)Observable
와 observable
의 가장 큰 차이점은 전자는 들어온 인자로 들어온 object를 바로 변경하지만, 후자는 클론을 하고 observable하게 만든다는 점이다. 또한 observable
는 Proxy object를 생성한다. (추후 보완..ㅠㅠ) 따라서 공식 문서에서도 make(Auto)Observable
사용을 권장하고 있다.
action은 state를 변경하는 것을 뜻한다. makeObservable
을 사용하면 action을 따로 작성해줘야 하지만, makeAutoObservable
은 이를 대신해준다. 밑에 코드에서 두 가지 방식 모두 사용해 볼 것이다.
computed values(계산된 값)는 다른 observable들에서 어떠한 정보를 도출하는데 사용할 수 있다. 이렇게만 봐서는 뭔지 모를 수 있는데 밑의 예시를 통해 같이 살펴보자.
자바스크립트는 접근제어자를 제공하지 않아 데이터 핸들링 비즈니스 로직이 퍼져버리고 사이드 이펙트가 발생할 확률이 높고 관리하지 않으면 번잡스럽 코드가 생산되기 쉽다.
하지만 접근제어자가 없다고 해도 캡슐화를 구현할 수 있는 방법들이 있긴하지만 잘 활용되어 지지는 않습니다.
Mobx는 Configuration에서 옵션 한줄로 state의 변경은 해당 클래스의 메소드를 통해서만 변경할 수 있도록 할 수 있고
도메인 모델간의 message를 통한 상호작용 코드 패턴을 유지해 나갈 수 있도록 해줍니다.
https://ko.mobx.js.org/README.html
Mobx의 데코레이터를 사용하기 위해서는 CRA가 지원이 안돼서 따로 설정을 해줘야 한다.
출처
https://kyounghwan01.github.io/blog/React/mobx/basic/#mobx-overview
https://www.howdy-mj.me/mobx/mobx6-intro/
https://techblog.woowahan.com/2599/