References
[React] 함수형 컴포넌트에서 Mobx 사용하기 .J4J
- Actions : Observable State의 데이터를 변화시키는 함수
- Observable State : 관찰되고 있는 데이터가 저장되는 곳
- Compute Values : 관찰되고 있는 데이터의 변화를 감지하여, 렌더링 등 사이드 이펙트 트리거를 전달함
- Side Effects : 렌더링 등의 사이드 이펙트를 실행하고, 이후의 액션 함수가 실행되도록 이벤트를 전달함
src/modules
디렉토리를 생성하여 아래 파일들을 만든다.
numberStore.js
// observable 파일 : state와 액션 함수가 담겨있음
import { observable } from "mobx";
const NumberStore = observable({
// state
num: 0,
// 액션 함수
increaseAction(num) {
this.num = this.num + num;
}
decreaseAction(num) {
this.num = this.num - num
}
});
export default NumberStore;
indexStore.js
// observable들을 묶어주는 파일
import NumberStore from "./numberStore";
const indexStore = () => ({
NumberStore,
// StoreBlah
// BlahStore
});
export default indexStore;
- App.js에서 사용하기
import indexStore from "./modules/indexStore";
export default function App() {
const { NumberStore } = indexStore();
const increase = () => {
NumberStore.increaseAction(1);
};
const decrease = () => {
NumberStore.decreaseAction(1);
};
return (
<>
<p>Num value : {NumberStore.num}</p>
<button onClick={increase}>+1</button>
<button onClick={decrease}>-1</button>
</>
);
}