Jaro의 공부하는 블로그입니다.

14.mobx-part2

React/React&typeScript 2017. 8. 1. 02:05

이전포스팅에서 간단하게 mobx를 사용해보았습니다.

이번 포스팅에서는 mobx에 있는 여러 기능들에 대해 알아보는 포스팅을 해보도록 하겠습니다.

observable

observable은 관찰하고자 하는 값에 사용합니다.

obsevable을 사용하는 방법에는 2가지가 있습니다.

1. 일반 function 으로 사용

2. 데코레이터로 사용

일반 function 으로 사용하는것은 매우 간단하게 사용이 가능합니다.

이전 포스팅에서 사용한 프로젝트를 재 사용하여 예제를 만들어 보겠습니다.

stores 폴더에 AgeStore2.tsx 파일을 만들고 함수형태의 observable을 사용해 보겠습니다.

import { observable } from 'mobx';

const Age2 = observable({
    age: 35
});

export default Age2;

그냥 관찰하고자 하는 값에 observable 함수를 사용하기만 하면 됩니다.

stores/index.tsx

import AgeStore from './AgeStore';
import Age2 from './AgeStore2';

export { AgeStore, Age2 };

그리고 Age 컴포넌트에서 사용해보겠습니다.

import * as React from 'react';

import { AgeStore, Age2 } from '../stores';

import { observer } from 'mobx-react';

const ageState = new AgeStore(30);

@observer
class Age extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
    this.addAge = this.addAge.bind(this);
    this.addNumber = this.addNumber.bind(this);
  }
  render() {
    return (
      <div className="Age">
        <h1>{ageState.getAge()}</h1>
        <button onClick={() => this.addAge()}>나이증가</button>
        <h1>{Age2.age}</h1>
        <button onClick={() => this.addNumber()}>나이증가</button>
      </div>
    );
  }
  addAge() {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
    console.log(ageState.getAge());
  }
  addNumber() {
    Age2.age = Age2.age + 1;
  }
}

export default Age;

이전 코드에서 Age2를 추가하고, 이벤트 핸들러를 추가한다음, 적용시켰습니다.

이상없이 작동하는것을 확인할수 있습니다.

데코레이터로 사용하는 방법은 이미 사용해보았기 때문에 사용 방법은 아실거라 생각합니다.

다만 기억하실점은, 데코레이터로 사용을 하신다면, 반드시 클래스의 프로퍼티에만 사용이 가능함을 기억하셔야 합니다.

다른곳에서는 사용이 불가합니다.

만약 여러 프로퍼티를 사용한다면 여러개의 observable을 사용하면 됩니다.

observer

observer는 observable된 값 변화에 따라 반응하는 컴포넌트에 사용합니다.

역시 observable과 같이 사용하는 방법에는 2가지 방식이 존재합니다.

1. 데코레이터 없이 사용하는 방법

2. 데코레이터로 사용하는 방법

데코레이터 없이 사용하는 방법은 observer(<컴포넌트>); 의 형식으로 사용하면 됩니다.

만약 state를 전혀 사용하지 않는 컴포넌트일 경우, 일반적으로는 stateless component, 즉 SFC를 사용하였는데, mobx를 사용할 경우에는 SFC 대신 observer를 사용하면 됩니다.

즉 이전 예제의 Age 컴포넌트를

const Age = observer(() => {
  function addAge(): void {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
    console.log(ageState.getAge());
  }
  function addNumber(): void {
    Age2.age = Age2.age + 1;
  }
  return (
    <div className="Age">
      <h1>{ageState.getAge()}</h1>
      <button onClick={() => addAge()}>나이증가</button>
      <h1>{Age2.age}</h1>
      <button onClick={() => addNumber()}>나이증가</button>
    </div>
  );
});

이렇게 사용이 가능합니다.

데코레이터를 사용할 경우에는 컴포넌트 클래스의 상단에 사용하면 되는데,

만약 observer 데코레이터를 사용할 경우에는 주의할 점이 있습니다.

바로 Lifecycle이 mobx의 라이프 사이클로 바뀐다는 점입니다.

이전에 Lifecycle 포스팅에서 ( http://jaroinside.tistory.com/18 ) react의 update lifecycle은

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate(nextProps, nextState)

render()

componentDidUpdate(prevProps, prevState)

이렇게 5개의 라이프 사이클이 존재하고 순서대로 작동한다고 하였습니다.

하지만 observer 데코레이터를 사용하면 라이프사이클은,

- componentWillReact

- componentWillUpdate

- render

- componentDidUpdate

의 순서로 실행되게 됩니다. ( 주의 ! )

- 확인을 위한 코드 -

import * as React from 'react';

import { AgeStore, Age2 } from '../stores';

import { observer } from 'mobx-react';

const ageState = new AgeStore(30);

@observer
class Age extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
    this.addAge = this.addAge.bind(this);
    this.addNumber = this.addNumber.bind(this);
  }

  componentWillReact() {
    console.log('componentWillReact');
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  render() {
    console.log('render');
    return (
      <div className="Age">
        <h1>{ageState.getAge()}</h1>
        <button onClick={() => this.addAge()}>나이증가</button>
        <h1>{Age2.age}</h1>
        <button onClick={() => this.addNumber()}>나이증가</button>
      </div>
    );
  }
  addAge() {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
  }
  addNumber() {
    Age2.age = Age2.age + 1;
  }
}

export default Age;