[MobX] MobX 이해하기

action, observable, computed는 MobX에서 제공하는 API이다. 스토어 객체에서 사용한다.

injext와 observer는 MobX와 react를 연결해주는 MobX-react라이브러리에서 제공하는 API이다.

💻 MobX 5 => MobX 6버전

MobX 5에서는 @데코레이터 문법을 사용하지만 현재 버전6에서는 사용하지 않고 있다.
대신 makeObservable이라는 기능을 추가하여 constructor에 각 변수에 대해 observable 인지 action 인지 먼저 정의한다.
또 inject를 사용하지 않는다. MobXProviderContext를 사용하여 react 친화적으로 수정했다.

computed

observable를 사용하여 어떤 연산작업을 이용할 때 computed메서드를 적용하면 캐싱 작업을 진행한다.

const x = 5;
const y = 10;

@computed
get Area(){
	return x*y
}

area를 10회 호출하면 50이라는 값이 캐싱되어 있다가 연산을 수행하지 않고 값을 바로 반환해준다.

inject

스토어 객체를 react 컴포넌트에 주입할 때 사용.

이렇게 주입된 스토어는 리액트 컴포넌트에서 props로 꺼내어 사용할 수 있다.

inject로 주입을 받기 전에 provider를 통해서 전체 스토어를 props로 보낸다는 전제하에 가능하다.

@inject("counterStore") /// sotre의 name

class CounterComponent extends Component{
	render(){
    	const {counterStore} = this.props;
      //props로 받는다. 
      .
      .
    }
}

observer API

observable 데이터를 관찰하는 컴포넌트에 적용하는 API.

MobX에 오토 런을 이용해서 observable 데이터(state)가 변경되면 랜더 메서드를 수행한다.

action

state를 업데이트한다. makeAutoObservable의 경우 action을 따로 작성해주지 않아도 된다.

:: 계속해서 업데이트