Mobx

Mobx

Package 추가

$ npm i --save mobx mobx-react

Decorator

1. @observable from mobx

• React의 state와 비슷한 역할.
• MobX 상에서 변수와 같은 역할을 하고, Store에 넣고 관리하고 싶은 변수는 @observable 키워드로 선언한다.

@observable valueToBeStored:string = "hello"

2. @action from mobx

• React의 setState와 비슷한 역할.

@action changeStoreValue = (value: string) => {
        this.myStore = value;
}

3. @Autobind from core-decorators

• javascript의 this.bind를 자동으로 해주는 데코레이더

@Autobind
export default class HelloWorld {

}

설정

1. 최상단 컴포넌트에서 Provider를 설정

import { Provider } from 'mobx-react'
import MyStore from './MyStore'

const myStore = new MyStore()

const RenderComponent = () => {
	<Provider myStore={myStore}>
		<App />
	</Provider>
}

2. MobX를 사용할 곳에서 세팅

import { observer, inject } from 'mobx-react'

@inject("store-name") // Store에 있는 변수 호출
@observer // Store 값을 관찰하고 변화가 있으면 rerendering하겠다는 의미
export default class App extends Reaxt.Component<any> {
	render() {
		return <h1>{this.props.<store-name>}</h1>
	}
}