ZeroCho강좌 React/MobX 3-1 MobX도입하기

본 포스팅은 제로초님(조현영) 유튜브 강의를 바탕으로 자습을 위하여 작성한 포스팅입니다.

 

 

import 와 require의 차이점!

기본은 require고 import는 문법을 편하게 바꿔준다.

두개는 default에서 다르다!

 

mobX는 자유도가 너무 높아서, 구조하나를 정해서 협업을 하는것이 좋다. 

어떤 제약이나 규약 등이 명확하게 있지가 않다.

 

mobX는 주로 observable을 이용해서 사용한다.

@ : 데코레이터  - 공식 문법은 아니지만, 많은 사람들이 편리해서 사용을 하고 있음.

 

const { observable, autorun, runInAction } = require("mobx");

const state = observable({
  compA: "a",
  compB: 12,
  compC: null
});

autorun(() => {
  console.log("changed", state.compA);
}); // observable에 들어있는 것, 즉 state가 변경될때마다 callback함수가 실행된다.


// 아래는 동작하지 않음!! 연달아서 같은 동작으로 인식해서 하나만 처리된다. 그래서 runInAction이 필요!
// state.compA = "c"; 
// state.compB = "c";
// state.compC = "c";

runInAction(() => {
  state.compA = "c"; // 이런 동작하나하나가 redux의 action이 된다. 이걸 observable이 안다.
  state.compB = "c";
  state.compC = "c";
});

runInAction(() => {
  state.compC = "d";
});

state를 observable을 통해서 감싸주고,

직접적으로 state.compA 등과 같이 변경해주는게 action이 된다.

나머지는 주석을 참고바람 !