프로젝트에 Decorator 설정하기

데코레이터 사용하기

MobX 6 이전에는 observable, computed, action을 표시하기 위해 사용하도록 권장했다. 하지만 현재 데코레이터는 ES 표준이 아니기 때문에 기존의 시행되었던 방식과는 다르기 때문에 호환성을 위해 makeObservable / makeAutoObservable을 권장하고 있다.

 

그러나 기존의 많은 자료에서 데코레이터를 사용하고 있기 때문에 데코레이터 사용방법을 알아보자.

 

프로젝트 세팅 방법

JSX

npx create-react-app mobx-start
npm i customize-cra react-app-rewired
npm i autobind-decorator

// jsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

데코레이터 활성화

// package.json

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
			[
				"@babel/plugin-proposal-class-properties", 
				{ 
					"loose": false 
				}
			]
        // MobX 4/5에서와 반대로, "loose"가 false
    ]
      ]
    ]
  }

Typescript

타입스크립트에서는 데코레이터 설정히 간편하기 때문에 별다른 페키지를 설치할 필요가 없다.

npx create-react-app mobx-ts-start --template typescript
npm i autobind-decorator

//tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "experimentalDecorators": true // 추가
  },
  "include": ["src"]
}

// Button.jsx
import autobind from "autobind-decorator";
import React from "react";

export default class Button extends React.Component {
  render() {
    return <button onClick={this.click}>버튼</button>;
  }

  @autobind
  click() {
    console.log("clicked");
  }
}

화면결과

데코레이터 구문의 한계

데코레이터 구문의 현재 트랜스파일러 구현은 매우 제한적이며 정확하게 동작하지 않는다. 또한 2단계 프로포절이 모든 트랜스파일러에 의해 시행되기 전까지는 많은 구성 패턴들이 데코레이터와 함께 사용 불가하다. 이러한 이유로 MobX의 현재 데코레이터 구문 지원은 기능이 모든 환경에서 일관되게 동작하는 범위로 설정되어 있다.