[JS] MobX?

[MobX?]

Redux와 다른 종류의 프론트엔드 상태관리 도구이다.

Redux가 함수형 아이디어라면, MobX는 반응형 아이디어를 선택했다.

주로 React와 함께 사용한다.

반응형 패러다임의 핵심인, 옵저버 패턴을 사용하여, 상태를 Observable하게 관리할 수 있다.

상태가 변화하면 Reaction 반응한다.

@observer

@observer로 ReactComponent를 감싼다. 그러면 Reaction에 반응해서 render를 수행한다.

@observable 

데코레이터를 사용하여 객체나 값들을 Observable하게 만든다.

클래스 내부변수 앞에 데코레이터를 적거나, 클래스 자체를 감싸서 사용하는데

이렇게 하게 되면 읽거나 쓰는 것을 모두 관찰하게 된다.

이것은 Javascript의 객체 프로퍼티가 아닌, getter / setter로 구현되기에 가능하다.

@computed

@observable 값들의 연산이 필요할 때 사용하는데,

@computed를 붙이든 붙이지 않던 결과 값은 같다. 하지만 성능상 @computed는 캐싱되므로 더 좋다.

복잡한 계산이 필요한 경우 + 여러번 계산 결과가 필요한 경우 사용하면 좋다.

javascript getter에만 사용할 수 있다.

@autorun

@abservable 값이 변할때마다(Reaction) 호출된다.

React외에 다른 API에서 사용해주어야 한다.

@action

@action 을 사용하게 되면 내부적으로 모든 @observable 변수가 변경되어야만, 메소드가 호출된다.

호출되는 횟수를 줄일 수 있다. 이것은 DB에서 Transaction 개념을 적용한 것이고, Transaction이라고 부른다.

[출처] 

https://github.com/mobxjs/mobx

https://hyunseob.github.io/2017/10/07/hello-mobx/