mobx-react 실전, 요약

react에 상태관리 라이브러리는 필수라고 본다. mobx는 여러 페이지에서 필요한 상태를 하나의 스토어에 보관하고, 상태가 변경될 때 react component를 업데이트할 수 있다.

이 글에서는 mobx에 대해 설명한다. mobx에는 상태, 스토어가 있다. 상태는 class와 같고, 스토어는 객체라고 보면 된다. 스토어에서 상태를 객체화한다. 딱 실전에서 쉽게 활용할 수 있는 것들을 정리해본다.

상태

아래 AppState는 상태에 대한 코드이다. AppState는 변수로 hello를 갖고 있다.

@observable이라고 적혀있는데, 이것은 Decorator라고 불리는 것이다. ES7 or typescript에서 사용할 수 있다. 이것의 의미는 관측될 수 있는 애 라는 의미이다. ㅋㅋ 여러 컴포넌트에서 얘를 바꿀거다. 라는 의미라고 해야하나.. 좀 더 찾아보고 수정하겠다.

// AppState.js

import { observable, action } from 'mobx';
import axios from 'axios';

export default class AppState {
  @observable hello;

  constructor() {
    this.hello = 'hello init';
  }


  @action setHello(data) {
    this.hello = data;
  }

}

스토어

스토어는 여러 상태를 갖고 있을 수 있다.

여기서 rfx-core는 mobx store의 핫 리로드를 위해 사용했다. 처음 사용하게된 템플릿에서 이걸 사용해서 그대로 뒀다. 아무튼 코드에서 보면 store는 appState를 갖고 있다.

// store.js

import { store } from 'rfx-core';

import AppState from './AppState';

export default store.setup({
	appState: AppState
});

컴포넌트

컴포넌트에서는 이렇게 쓴다. 먼저 스토어에 저장된 상태를 가져온다. 그리고 상태에 저장된 변수를 읽을 수 있다. 또 액션으로 작성된 함수를 실행할 수 있다. 함수를 실행함으로써, 상태에 저장된 변수를 바꾼다. 여기서 바뀐 변수는 다른 컴포넌트에서도 접근가능하며, 모두 바뀌어있다.

@inject는 store를 props에 넣어주는 역할을 한다. 그래서 component에서 store에 접근하는 방식이 props를 활용해서 접근할 수 있다. 

@observer는 observable한 상태들이 업데이트가 되는 것을 감지하겠다라는 의미이다. @observable한 상태가 업데이트되면 렌더링을 다시한다.

// App.js

import { Route, Link } from 'react-router-dom';
import { inject, observer } from 'mobx-react';

@inject('store', 'routing')
@observer
export default class App extends Component {

	constructor(props) {
		super(props);
		this.appState = this.props.store.appState;
		console.log(this.appState.hello);
		this.appState.setHello('Hello App page');
	}