React Native/Typescript 환경에서 데코레이터 함수 사용하는 방법

서론

대상독자

타입스크립트 개발 시, 데코레이터 함수를 사용하고 싶은 개발자

학습목표

타입스크립트 환경에서 데코레이터 함수를 설정하는 방법에 대해서 알아보겠습니다.

본론

먼저 필요한 패키지들을 설치합니다.

babel과 babel plugin 설치하기

yarn add -D @babel/core @babel/plugin-proposal-decorators

@babel/plugin-proposal-decorators란 라이브러리를 설치해줍니다.

babel.config.js 수정하기

그런 뒤, babel.config.js 파일에서 해당 값에 맞게 설정해줍니다.

module.exports = function () {
  return {
    ...,
    plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
    ],
  };
};

tsConfig.json 수정하기

tsConfig 파일에서 "experimentalDecorators": true 옵션을 추가합니다.

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

기존 캐쉬 제거하기

마지막으로 metro 혹은 expo에 저장되어 있는 캐쉬를 제거하여 새로운 파일로 빌드해, 서버를 실행해줍니다.

// expo app 
expo r -c (expo)

// bare react native app
npm run start --reset-cache

파일의 경로를 수정한 후, expo 혹은 metro 서버를 다시 실행해줍니다. 정상적으로 작동하는 것을 확인하실 수 있습니다.