CRA 프로젝트 eject 없이 decorator 사용할수 있도록 설정을 알아봅니다.

1. 필요한 패키지 추가 (npm or yarn 이용)

// npm
npm install --save -d customize-cra
npm install --save -d react-app-rewired

// yarn
yarn add --dev customize-cra
yarn add --dev react-app-rewired

2. package.json 수정

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject",
}

3. 프로젝트 루트 디렉토리에 config-overrides.js 파일 생성

const {
  addDecoratorsLegacy, // decorator를 사용할 수 있도록 해주는 config
  disableEsLint,
  override
} = require("customize-cra");

// 사용자 정의 웹팩 설정
module.exports = {
  webpack: override(disableEsLint(), addDecoratorsLegacy())
};

(optional) Mobx 사용 설정

1. 필요 패키지 다운로드

// babel 플러그인 설치
yarn add --dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

// 추가적인 es7 데코레이터 설치
yarn add --dev core-decorators

// mobx 설치
yarn add mobx mobx-react

2. package.json 수정

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

참조