React Native X TypeScript 시작하기
Written on October 3, 2019
TypeScript 공부를 시작했으니 이번엔 React Native에 TypeScript를 적용해보자. 먼저 프로젝트 만들기! 공식문서에 너무 잘 나와있어 따라하면 무리없이 시작할 수 있다.
react native 프로젝트 시작하기
먼저, react-native init
을 사용해 react native 프로젝트를 생성한다.
react-native init MyAwesomeProject
cd MyAwesomeProject
typescript 관련 dependencies 설치
이제 typescript를 적용하는데 필요한 dependencies를 설치한다.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react-native
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native
바로 위에서 touch
로 생성한 rn-cli.config.js
파일에 다음 내용을 추가한다.
module.exports = {
getTransformModulePath() {
return require.resolve("react-native-typescript-transformer");
},
getSourceExts() {
return ["ts", "tsx"];
}
};
그리고 tsconfig.json
파일에 컴파일 옵션들이 정의되어 있는데, es5로 설정되어 있다. 만약 es6 문법을 쓸 예정이라면, 아래 내용을 바꿔주면 된다.
...
"target": "es6" // 'es5"
...
파일명 바꾸기
App.js를 App.tsx로 변경하고, 앞으로 컴포넌트 파일들은 .tsx
확장자로 생성한다.
주의 할 점은 index.js 파일은 변경하지 않고 그대로 두어야 한다.
끄읕!
👩🏻💻 배우는 것을 즐기는 프론트엔드 개발자 입니다
부족한 블로그에 방문해 주셔서 감사합니다 🙇🏻♀️
in the process of becoming the best version of myself