준비하기

MobX 는, Redux 를 대체할 수도 있는 라이브러리입니다. 아직까지는, 리덕스가 MobX 보다 일반적으로 많이 사용되고 있습니다. 그리고 아마 앞으로도 그럴 것이구요.

여러분이 앞으로 MobX 를 쓰게 될 확률은 Redux 를 쓰게 될 확률보다 낮긴 하겠지만, MobX 또한 충분히 좋은 솔루션이고, 배워볼만한 가치가 충분히 있다고 판단되어 이번 강의에서 다뤄보게 되었습니다. (참고로 앞으로 이어질 나머지 패스트캠퍼스 강의는 Redux 기반으로 이뤄져있습니다)

프로젝트 리셋

https://github.com/vlpt-playground/begin-redux 프로젝트를 새로 clone 하시거나, 새로 추가한 코드들을 다음과 같이 따로 커밋하고 template 브랜치로 돌아오세요.

git checkout -b mybranch
git add .
git commit -m 'redux codes'
git checkout template

혹은 편의상 https://codesandbox.io/s/ov3xrx6xl9 에서 진행하셔도 됩니다.

Decorators

MobX 에서는 Decorators 라는 문법을 사용하면 조금 더 편합니다. (무조건 써야하는것은 아닙니다.) 그런데 Decorators 는 아직 정규 자바스크립트 문법이 아니므로 babel 플러그인을 추가해주어야 합니다.

때문에, CRA 로 만든 프로젝트에서 사용하려면 yarn eject 를 해줘야 합니다.

yarn eject
yarn add --dev babel-plugin-transform-decorators-legacy

그 다음에, package.json 을 열어서 babel 쪽을 다음과 같이 수정하세요.

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "babel-plugin-transform-decorators-legacy"
    ]
  },

마지막으로 다음 라이브러리들을 설치하시면 준비 끝!

yarn add mobx mobx-react mobx-react-devtools