이 포스트를 보기 전 create-react-app 에서 eject 명령으로 설정 파일 추출하기를 읽고 오시는 것이 좋습니다.

——

mobx의 공식 페이지에서 제공하는 표준은 다음과 같습니다.

하지만 create-react-app을 이용한다면 decorator 표현식은 사용할 수 없습니다. 따라서 다음과 같은 방식으로 사용해야 합니다.

미묘한 차이지만 코드를 위아래로 오가면서 observable, computed 등을 정의하는 것은 좀 귀찮은 일입니다.

observer를 사용할 때도 다음과 같은 차이가 있습니다.

——

그렇다면 create-react-app을 eject 해서 decorator를 사용하도록 해보겠습니다. 가장 쉬운 방법은 mobx에서 제공하는 preset인 bable-preset-mobx 를 이용하는 겁니다.

package.json 파일을 열어 babel 파트에 “mobx”를 추가합니다.

순서가 중요합니다. mobx가 react-app보다 뒤에 있어야 합니다.

이제 decorator를 사용할 수 있습니다.