MobX

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


$ 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가 있다
스토어에는 상태들을 미리 선언해놓고  그 상태들을 컨테이너나 뷰단에서 갖다 쓸 수 있다.
특히 상태들은 이벤트를 주면 그때 그때 동적 변경이 가능하다.
내가 스토어에서 자주 사용하는 메서드는

 

@action

valueSetter(name, value) {

    this.[name]:value;

} 

 

이건데 이렇게 해두면 스토어에 선언된  @abservable 변수들을 필요할때 마다 원하는 값으로 변경할 수 있어서 매우 유용하다. 내가 제작한 모든 화면에는 이 메서드가 있다.

그리고  async - await 도 요즘들어 필수로 쓰고 있는데 회사마다 다르겠지만 여기서는 이걸 써서 함수를 로딩하면 화면에 로딩중이라는 표시 뱅글 뱅글... 약간 이런 모양이 나온다.