Mobx

• Mobx는 상태관리 라이브러리로서 함수형 프로그래밍에서 필수적인 옵저버 패턴을 적극적으로 사용한다.

주요 개념

• Observable State : 관찰 받고 있는 상태.

• Computed Value(연산된 값) : 값이 바뀌어야되는 필드에서 값이 바뀌는 경우만 리렌더링을 한다.

• Reaction(반응) : computed는 연산결과값이 달라지면 특정함수가 실행되지만, reactions는 값이 바뀜에 따라 함수를 호출한다. observable state의 내부값이 바뀔때마다 호출할 수 있다.

• Action(액션) : Observable State 변화시키는 함수

• autorun : reaction이나 computed를 대신해서 사용할 수 있다. autorun으로 전달해주는 함수에서 사용되는 값이 있으면 자동으로 상태 주시하고 바뀔때마다 함수를 호출

  • // Reaction
    reaction(
      () => calculator.a,
      (value, reaction) => {
        console.log(`change calculator.a :  ${calculator.a}`);
      }
    );
    
    reaction(
      () => calculator.b,
      value => {
        console.log(`change calculator.b :  ${calculator.b}`);
      }
    );
    // Autorun
    autorun(() => console.log(`change calculator.a :  ${calculator.a}`));
    autorun(() => console.log(`change calculator.b :  ${calculator.b}`));
    
    // 결과값은 동일하다
    

• Mobx를 이용하면 observable을 사용하여 state를 관리한다.

  • import React, { Component } from 'react';
    import { observable, action } from 'mobx'
    import { observer } from 'mobx-react'
    
    @observer
    class Login extends Component {
      @observable email = ''
      @observable passwords = ''
    
      constructor(props) {
        super(props)
        this.onSubmit = this.onSubmit.bind(this)
      }
    ...
      @action.bound
      onChange(event) {
        const { name, value } = event.target;
        this[name] = value;
      }
    
      onSubmit() {
        const { email, password } = this
        console.log('결과확인 : ', email, password);
      }
    }
    
    export default Login;
    

  • 위와 같이 @observer를 붙이고, 상태관리하고자 하는 필드에 @observable을 붙인다.

  • @Observer는 mobx.autorun함수를 가지고 컴포넌트의 render함수를 감싼다. observable한 데이터가 변경될때마다 observer가 포함된 컴포넌트는 재 렌더링된다.

  • 모든 컴포넌트에 @observer를 붙여도 mobx가 알아서 성능최적화를 해준다.

  • mobx를 사용하면 setState를 잘안쓴다. setState는 비동기적으로 처리되서 바로 렌더링이 안되는 경우가 존재하는데, 변수에 observable 선언만 해주면 변경에 대해서 즉각적으로 렌더링된다.

  • mobx에서 데이터조작할대는 action decorator를 사용해야한다.

Store

• 상태관리 저장소

  • class ApartStore {
      @observable activeApartInfo = {};
    
      constructor(root) {
        this.root = root;
      }
    
      @action setActiveApartInfo = (activeApartInfo) => {
        this.activeApartInfo = activeApartInfo;
      };
    }
    
    export default ApartStore;
    

  • store에 저장할 데이터를 @observable을 통해 선언하고 constructor를 통해 초기화한다.

참조

• https://medium.com/@jsh901220/mobx-%EC%B2%98%EC%9D%8C-%EC%8B%9C%EC%9E%91%ED%95%B4%EB%B3%B4%EA%B8%B0-a768f4aaa73e