MobX

주요 개념들

관찰 받고 있는 상태

• 상태는 변할 수 있다
• 만약 특정 상태가 변하면 MobX는 정확히 어떤 부분이 바뀌었는지 알 수 있다

만드는 방법

import { observable } from 'mobx'

const calculator = observable({
  a : 1,
  b : 2
})
// observable로 만들어졌기에 calculator는 관찰된다

연산된 값, computed

• 성능 최적화를 위해 많이 사용

• 연산에 기반하는 값이 바뀔 때만 새로 연산하게 하고, 바뀌지 않았다면 그냥 기존의 값을 사용

물을 네 병 샀다고 가정하고 총합을 계산했는데, 갑자기 한 병 더 추가해야 하는 경우 연산에 기반한 값이 바뀐 것

사용 방법

import { computed } from 'mobx';

const sum = computed(() => {
  // 의존하는 값이 바뀔 때 미리 값을 계산해놓고 조회 할 때는 캐싱된 데이터를 사용
  // 즉 sum.value를 여러 번 호출해도 실행되진 않음
  console.log('계산중')
  return calculator.a + calculator.b
});

sum.observe(() => calculator.a) // 어떤 상태를 주시할 것인지
// 최초로 한 번 computed 실행을 한 뒤 주시 값이 바뀌면 computed 재실행

console.log(sum.value)

반응, Reaction

값이 바뀜에 따라 해야할 일을 정하는 것

state가 변화했을 때 특정 함수 호출

사용하는 방법

import { reaction } from 'mobx';

reaction(
  () => calculator.a,
  // 어떤 상태의 어떤 값에 반응할 것인지
  value => {
    // 바뀐 값이 'value'로 들어온다
    console.log(`a 값이 ${value}로 바뀜`)
  }
)

연산된 값에 기반한 행동과 반응을 합친, autorun

함수 내에 조회하는 값을 자동으로 주시하므로, 보다 간편하다.

• reaction 대신 가능

  import { autorun } from 'mobx';
  
  autorun(() => console.log(`${calculator.a}`))
  // calculator.a가 변하면 실행된다

• computed의 observe 대신 가능

  import { autorun } from 'mobx';
  
  autorun(() => sum.get());
  // sum 안에서 사용 중인 상태 값을 주시한다
  // computed의 get() 함수를 써줘야 한다

행동, Action

상태에 변화를 일으키는 것

리덕스와 달리 객체 형태로 만들지 않는다

decorator 문법으로 사용

정규 문법은 아니지만, babel 플러그인을 통해 사용할 수 있는 문법

import { observable, computed, autorun, action, transaction } from 'mobx';

class GS25 {
  @observable basket = [];
	// 관찰 받을 데이터 선언

  @computed
  get total() {
  // 관찰 받을 데이터로 연산하는 함수 선언
    console.log('계산중입니다..!');
    return this.basket.reduce((prev, curr) => prev + curr.price, 0);
  }

  @action
	// 관찰 받은 데이터에 변화를 일으키는 액션 선언
  select(name, price) {
    this.basket.push({ name, price });
  }
}

const gs25 = new GS25();
autorun(() => gs25.total);
// 새 데이터 추가 될 때 알림
autorun(() => {
  if (gs25.basket.length > 0) {
    console.log(gs25.basket[gs25.basket.length - 1]);
  }
});

transaction(() => {
  gs25.select('물', 800);
  gs25.select('물', 800);
  gs25.select('포카칩', 1500);
});
// 액션을 한 곳에 묶어 모두 끝난 다음 실행하게 한다

console.log(gs25.total);

출처 : MobX 시작하기