Mobx

글로벌 상태 관리를 할 수 있는 라이브러리.

Redux와 같이 리액트에 종속된 것이 아닌 자바스크립트 내에서 두루두루 사용이 가능 하다.

흔히 Redux와 많이 비교가 되는데, Redux에 비하여 러닝커브가 상대적으로 낮으며 Observer 패턴을 이해하고 있으면 쉽게 사용 할 수 있다.

MobX의 기본 용어

Observable

앱에서 관찰 할 수 있는 상태들.

Mobx는 해당 값을 관찰하며, 변화에 따른 notify를 한다.

Computed

state의 변화가 생겼을 때, 그 state에 따라 추가적인 연산 작업을 수행하게 된다.

ex) 장바구니에 항목이 추가 되었을 때 total을 계산함.

state의 변화가 없으면 기존 값을 사용한다. (성능 최적화에 많이 사용)

Actions

상태에 어떤 변화를 일으킬 것인지 정의 하는 부분.

리덕스와 달리 따로 객체로 만들지는 않음.

Reactions

computed 비슷한 개념입니다. 하지만 computed는 특정 값을 연산한다면, Reactions는 특정 로직을 수행하는 것을 의미한다.

ex) 값이 변경 되었을 때 log를 찍음 .

직접 사용해보기

observable

import {observable} from 'mobx';

const values = observable ({
	num1 : 1, 
	num2 : 2,
})

observable 로 생성 되었기에 Mobx에 이 값을 관찰 하고 있다.

때문에 해당 값이 변화를 바로 탐지 한다.

reaction

import {observable, reaction} from 'mobx';

const values = observable ({
	num1 : 1, 
	num2 : 2,
})

reaction (
	()=> values.num1, // 감지 하는 타켓
	(value)=>{
		console.log(`a가 ${value}로 변함`);
	} // 감지 후 로직
)

computed

값이 변경 될 때, 그 값에 필요한 값을 미리 계산 해두는 캐싱 작업을 하게 된다.

import {observable, computed} from 'mobx';

const values = observable ({
	num1 : 1, 
	num2 : 2,
})

const sum = computed (()=>{ 
	return values.num1 + values.num2
}) 

autorun

reaction이나 computed 대신에 사용 될 수 있다.

autorun에 전달된 값을 주시하고 있다가, 그 값이 변경 되었을 때 함수가 동작 한다.

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

const values = observable ({
	num1 : 1, 
	num2 : 2,
})
let sum ; 

autorun(()=>{
	sum = values.num1 + values.num2
})

values.a = 10 
console.log(sum)
// 12 
------- 
const sumComputed = computed(()=>{
	return values.num2 + values.num2
})
autorun(()=> sumComputed.get())

---

class에 적용하기

import { decorate, observable, action, computed, autorun } from "mobx";

class Bucket {
  bucket = [];
  get total() {
    return this.bucket.reduce((acc, cur) => acc + cur.price, 0);
  }

  addItem(id, name, price) {
    console.log("add item");
    this.bucket = [...this.bucket, { id, name, price }];
  }
}

decorate(Bucket, {
  bucket: observable,
  total: computed,
  addItem: action
});

const bucket = new Bucket();

bucket.addItem(1, "a", 20); // 'add item'
bucket.addItem(1, "a", 20); // 'add item'
bucket.addItem(1, "a", 20); // 'add item'
bucket.addItem(1, "a", 20); // 'add item'
console.log(bucket.total); // 80 

addItem을 할 때 마다 관련된 연산이 발생한다. 만약, 모든 액션을 마치고 관련 연산이 일어나게 하려고 할때, transaction 을 이용하면 된다 .

import {transaction} from 'mobx'
...
transaction(()=>{
	bucket.addItem(1, "a", 20); 
	bucket.addItem(1, "a", 20); 
	bucket.addItem(1, "a", 20); 
	bucket.addItem(1, "a", 20); 
}) // 'add item' 한번만 찍힘 ! 

...

decorator

자바에서 어노테이션과 같은 생김새로 decorate 를 따로 생성하지 않고 편히 입력 할 수 있다.

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

class Bucket {
  @observable bucket = [];
	
	@computed
  get total() {
    return this.bucket.reduce((acc, cur) => acc + cur.price, 0);
  }
	@action 
  addItem(id, name, price) {
    console.log("add item");
    this.bucket = [...this.bucket, { id, name, price }];
  }
}

const bucket = new Bucket();

bucket.addItem(1, "a", 20); // 'add item'
bucket.addItem(1, "a", 20); // 'add item'
bucket.addItem(1, "a", 20); // 'add item'
bucket.addItem(1, "a", 20); // 'add item'
console.log(bucket.total); // 80 

위에서 decorate 를 쓴 것과 같은 결과이다.

@action

class Todo {
	@observable width = 0 ; 
	constructor(){
		
	}
//	@action.bound
	@action 
	setWidth(width){
		this.width = width ;  
	}
}

위와 같은 경우 setwidth를 하여 width 값을 세팅하려 하지만, 동작하지 않는다. 콜백 함수로 this가 바인딩 되지 않기 때문이다. 그래서 setWidth를 Arrow function 으로 바꾸거나, @action.bound 를 사용해야 한다.

React 적용

rolled-potatoes/study-mobx

참고

MobX (1) 시작하기