REACT - create-react-app 에서 mobX 사용하기. 18.06.07

2018. 12. 5. 수정.

현재 최신버전의 create-react-app 으로 만든 프로젝트에 대해 mobx 적용하는 방법이 훨씬 간단해졌다.

1. 일단 리액트 프로젝트를 eject 시킨다.

$ yarn run eject

2. mobx 에서 제공하는 babel-preset-mobx 를 추가한다.

$ yarn add babel-preset-mobx

3. package.json 에서 babel-presets 을 수정해준다.

...

"babel": {

"presets": [

"react-app",

"mobx"

]

}

...

4. mobx , mobx-react 를 추가해준다.

$ yarn add mobx mobx-react

그러면 이제 그냥 써도 된다;;;

근데, vscode 에서 데코레이터에 관련된 Warning 이 뜬다.

기존처럼 tsconfig.json 을 root 에 추가해서, 수정하려고 했는데, 그러면 오히려 빌드 에러가 난다. 

그냥  vscode 의 셋팅에서 이 warning 을 꺼주면 되더라.

command + ' , ' (콤마) -> 셋팅.

검색에서 experimentalDecorators 찾아서, 체크해준다.

아무 문제 없이 잘 돌아간다.

ANGULAR로 만들던 FANZEEL 을 리액트로 갈아엎고 있다. 

전역적 상태관리를 위해서, 일단 리액트 16.3의 ContextAPI 를 공부해서 쓰려고 했는데, 쫌 맘에 안든다. 

구조적으로 의존성이 심하고, 오만 잡다한 state 와, 액션까지 한곳에 정의해놓고, 한꺼번에 내려보낸다는 컨셉이 참 별로다.

state 를 내려보내는건 당연하긴 하겠지만, 상태변경을 위한 액션까지 정의해놓고 그거를 넘겨주는건 좀 별로지 않나?

아직 Best Practice 가 없어서 그런지, 찾아본 예제들의 거의 대부분이 저런식으로 사용하고 있다.

그래서 mobX를 사용하기로 했다.

-------------------------------------

create-react-app 에서 mobX를 사용하면, 데코레이터에서 에러를 내뿜는다.

create-react-app 에서 babel5가 들어있고, babel6 가 없어서 그렇단다.

그래서 eject 를 해서 패키징을 풀어버리고, 커스텀할 수 있게 만들어줘야 한다.

방법은 아래의 블로그에 잘 나와있다.

https://swizec.com/blog/mobx-with-create-react-app/swizec/7158

https://www.robinwieruch.de/create-react-app-mobx-decorators/

이후 package.json 에 아래부분을 추가해야하는데, 

"babel": {

"plugins": [

"transform-decorators-legacy"

],

"presets": [

"react-app"

]

},

json 하단에 자동으로 생성된 "babel"이 중복으로 정의되어있을 수 있다. 잘 살펴보자.