MobX
주요 개념들
관찰 받고 있는 상태
- 상태는 변할 수 있다
- 만약 특정 상태가 변하면
MobX
는 정확히 어떤 부분이 바뀌었는지 알 수 있다
만드는 방법
1 | import { observable } from 'mobx' |
연산된 값, computed
성능 최적화를 위해 많이 사용
연산에 기반하는 값이 바뀔 때만 새로 연산하게 하고, 바뀌지 않았다면 그냥 기존의 값을 사용
물을 네 병 샀다고 가정하고 총합을 계산했는데, 갑자기 한 병 더 추가해야 하는 경우 연산에 기반한 값이 바뀐 것
사용 방법
1 | import { computed } from 'mobx'; |
반응, Reaction
값이 바뀜에 따라 해야할 일을 정하는 것
state
가 변화했을 때 특정 함수 호출
사용하는 방법
1 | import { reaction } from 'mobx'; |
연산된 값에 기반한 행동과 반응을 합친, autorun
함수 내에 조회하는 값을 자동으로 주시하므로, 보다 간편하다.
reaction
대신 가능1
2
3
4import { autorun } from 'mobx';
autorun(() => console.log(`${calculator.a}`))
// calculator.a가 변하면 실행된다computed
의observe
대신 가능1
2
3
4
5import { autorun } from 'mobx';
autorun(() => sum.get());
// sum 안에서 사용 중인 상태 값을 주시한다
// computed의 get() 함수를 써줘야 한다
행동, Action
상태에 변화를 일으키는 것
리덕스와 달리 객체 형태로 만들지 않는다
decorator
문법으로 사용
정규 문법은 아니지만, babel
플러그인을 통해 사용할 수 있는 문법
1 | import { observable, computed, autorun, action, transaction } from 'mobx'; |
출처 : MobX 시작하기