MobX

개발자 우니·2020년 8월 23일
0
npm install mobx --save
npm install mobx-react --save 

MobX 란 무엇인가

state를 전역적으로 쉽게 관리할 수 있게 해주는 라이브러리 (Redux와 유사)
MobX의 흐름을 전반적으로 보여주는 그림으로 필수로 알아야 할 개념은 observer / @action / @observable / @computed 이다.

React Native에서 MobX decorator를 사용하기 위해 설치해야할 것 !

yarn add @babel/plugin-proposal-decorators

설치하고나서
babel.config.js에 가서

@observable

말 그대로 '관찰받고 있는' 상태로 이해하면 편하다. @를 이용해서 decorator로 property를 감싸주면 그 property가 변했을 때, 자동적으로 재구성되면서 rerender된다. obervable의 value는 object, array, primitive value 무엇이든 가능하다. decorator를 사용하지 않고도 observable을 설정할 수 있다.

((decorator 없는 경우))

@computed

observable의 property의 value를 직접적으로 바꾸는 action과 달리 그 property의 상태를 getter/setter 함수를 이용해서 가져올때 쓰인다. 그래서 주로 count, map, filter 함수를 사용하는 경우에는 @computed 에서 함수를 설정한다.
getter함수에 대해 알고 싶다면 클릭
(get 함수 : 객체 안에서 객체의 프로퍼티를 가져올 때 호출되는 함수, arrow function을 사용하지 않는 것에 주의)

(-ing 추후 내용 추가예정)

profile
It’s now or never

0개의 댓글