mobx 프로젝트 파일 생성

<Container>

MainContainer.js

 

<Store>

UserStore.js

 

데코레이터 autobind

서투른 맹이는 @Autobind를 쓰고싶은데 도저히......

 

일단 욕심부리지 않고 기본적인 구동만 해보았다.

드디어 떠오른 맹이의 MainContainer

이거는 App.js

 

Mobx 를 사용하고 있어서 좋은점은 어노테이션을 사용해서 가독성이 좋다.
회사에서는 프로젝트를 생성할 때 이미 reuse 부서에서 만들어 놓은 틀 이나 shared 파일들 덕분에 그냥 프로젝트생성하고 코딩에만 몰두하면 되지만, 막상 혼자 만들어 볼때 약간 삽질했다.

<Mobx 프로젝트 생성>
$ npx create-react-app mobx-with-react
$ cd mobx-with-react
$ yarn add mobx mobx-react
$ yarn start

여기에 @어노테이션같은 데코레이터를 사용하려면 babel 설정을 따로 해줘야 한다. 

 

<babel설정 커스터마이징> - 가장 큰 배포단위 경로에서 할것(src부모 폴더)
$ yarn eject
$ yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

<package.json>

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
  }

이러고 yarn install 한번하고 yarn start
솔직히 사내에서도 리액트 가이드가 아직까지는 제대로 없어서 구글링을 많이 하기때문에 이 또한 구글링하다가 알아낸 방법들이다. 
아무튼 이렇게 하고 나면 깔끔하게 데코레이터를 사용할 수 있다.

내가 또 삽질한것은 !
다해도 자꾸 모듈 빌드 에러가 뜬다.
Failed to compile 빨갛게 뜨면서 Module build failed 라고 뜨는데 빌드를 못한다는 모듈을 찾아서
$ yarn add [모듈이름]  이런식으로 하나하나 해주면 된다.
이보다 쉬운 방법이 있을진 모르지만 나는 이것 밖에 못찾았다ㅜㅜ

그리고 mobx도 리덕스처럼 store가 있다
스토어에는 상태들을 미리 선언해놓고