카운트앱 만들기(2) - 데코레이터 사용

MobX 6 이전에는 observable, computed, action을 표시하기 위해 ES.next 데코레이터를 사용하도록 권장했습니다.

그러나 데코레이터는 현재 ES 표준이 아니며 표준화 과정에도 오랜 시간이 소요되고 있습니다.

또한 표준화되는 데코레이터는 기존의 시행되었던 방식과 다를 것으로 보입니다.

MobX 6는 호환성을 위해 데코레이터에서 벗어나 makeObservable / makeAutoObservable을 사용할 것을 권장합니다.

 

그러나 기존의 많은 코드베이스와 온라인 문서 및 튜토리얼 자료에서 데코레이터를 사용하고 있습니다.

observable, computed, action와 같이 makeObservable 의 주석으로 사용할 수 있는 것은 무엇이든 데코레이터로 사용할 수 있다는 것이 규칙입니다. 

 

데코레이터 지원 활성화하기

MobX를 사용하는 새로운 코드베이스는 언어의 공식 파트가 될 때까지 데코레이터를 사용하는 것을 권장하지 않지만, 사용할 수는 있습니다. 변환을 위한 설정이 필요하므로 Babel 또는 TypeScript를 사용해야 합니다.

 

TypeScript

tsconfig.json에서 "experimentalDecorators": true 와 "useDefineForClassFields": true 컴파일러 옵션을 추가합니다.

 

Babel 7

npm i --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

위 명령어로 데코레이터 지원 패키지를 설치합니다.

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

.babelrc 파일에서 활성화합니다. 작성시 순서를 지켜야 합니다.

 

데코레이터를 사용해서 카운트 앱을 만듭니다.

npx create-react-app ./ --template typescript
npm install react react-dom --save
npm install mobx mobx-react --save
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

위 명령어들을 순서대로 실행해서 필요한 모듈들을 설치합니다.

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

.babelrc 파일에서 활성화합니다. 작성시 순서를 지켜야 합니다.

src폴더 안에 counterStore.js의 코드입니다.

MobX 6 이전에는 생성자에서 makeObservable(this) 호출이 요구되지 않았지만 6버전 이후로느 다릅니다.

해당 호출을 통해 데코레이터 구현이 더 간단해지고 호환성이 높아졌기 때문입니다.

 

@observer : observerable state의 업데이트에 따라 컴포넌트를 자동으로 업데이트

 

구체적인 코드는 https://github.com/Skye7095/react-mobx-decorators-app     를 참고하시기 바랍니다.