[React] componentDidMount 에서 async/await 사용하기

클래스 컴포넌트 생명주기 함수 중 하나인 componentDidMount() 안에서 await을 사용하는데 다음과 같은 에러가 났다.

Parsing error: Unexpected reserved word 'await'.

  componentDidMount() {
    await tmModel.loadModel() // teachable machine 로드
  }

해결 방법은 componentDidMount 앞에 async를 붙여주면 된다. (Create-react-app으로 프로젝트를 만든 경우)

 async componentDidMount() {
    await tmModel.loadModel() // teachable machine 로드
  }

CRA로 만든 프로젝트가 아닌 경우 웹팩 설정을 수정해줘야 한다.

우선 babel preset env, babel plugin transform runtime을 설치 해주고 .babelrc 설정 파일을 수정한다.

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/runtime --save-dev

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            ">0.25%",
            "not ie 11",
            "not op_mini all"
          ]
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

출처 : https://www.valentinog.com/blog/await-react/