MOBX

책에 있는 내용이 아닌, 저자 블로그를 보고 개념을 익힘

하다가 굳이 mobx를 할 필요가 있겠냐는 말을 들어서(hook과 관련된 말이었다) 일단 리덕스를 더 해보기로 결정…

~홀드~

observable

관찰 받고 있는 상태, Observable State를 만들어준다.

import { observable, reaction, computed, autorun } from 'mobx';

const calculator = observable({
  a: 1,
  b: 2
});

reaction

관찰 받고 있는 상태가 바뀔 때 사용

reaction(
  () => calculator.a,
  (value, reaction) => {
    console.log(`a 값이 ${value} 로 바뀌었네요!`);
  }
);
// 이 경우 A의 값이 바뀔 때마다 실행된다.

computed

연산된 값을 사용해야 할 때 사용

의존하는 값이 바뀔 때 미리 값을 계산해놓고 조회할 때 캐싱된 데이터를 사용한다.

const sum = computed(() => {
  return calculator.a + calculator.b;
});

sum.observe(() => calculator.a);
// a 값을 주시, a 값이 바뀔 때마다 자동으로 실행
sum.observe(() => calculator.b); // b 값을 주시

autorun

reaction(), computed()의 observe()대신 쓸 수 있다.

함수 내에서 조회하는 값을 자동으로 주시하고 있다.

autorun(() => console.log(`a 값이 ${calculator.a} 로 바뀌었네요!`));
autorun(() => console.log(`b 값이 ${calculator.b} 로 바뀌었네요!`));
autorun(() => sum.get());

computed 로 만든 값의 .get() 함수를 호출해주면, 하나하나 observe 해주지 않아도 된다.