React Native에 TypeScript 적용

React Native란

React Native 란 JavaScript 및 React를 사용하여 모바일 앱을 제작할수 있는 오픈소스 이다. React와 마찬가지로 FaceBook에서 개발했다. 원래 일반적으로 모바일 앱을 개발하려면 Android는 Java , iOS는 Objective-c 또는 Swift를 사용해야 한다. AndRoid 와 iOS 앱개발을 따로하는 앱을 Native(네이티브) 앱 이라고 한다. React Native는 JavaScript를 사용해 Android , iOS를 동시에 개발할수 있다. 동시에 개발하는 앱을 hybrid(하이브리드) 앱이라고 한다.

프로젝트 생성

React Native는 두가지 방법으로 프로젝트를 생성할수 있다. 하나는 Expo를 이용한 것이고 나머지 하나는 React Native Cli를 사용한다. 여기서는 React Native Cli를 사용한 개발을 알아볼 것이다.

React Native Cli

먼저 아래와 같은 방법으로 React Native Cli를 다운받아야한다

$ npm install react-native-cli --global

글로벌로 다운받으면 expo 명령어를 사용할수 있다. 다음과 같이 명령어를 사용해 프로젝트를 생성해 보자

$ react-native init ProjectName
$ cd ProjectName

그런다음 type형으로 React , React Native를 다운받고 react-native-typescript-transformer를 다운받는다

$ yarn add --dev @types/react @types/react-native react-native-typescript-transformer

IDE 및 CI 유형 검사를 위해 Typescript를 구성하려면 다음 명령을 사용하여 tsconfig.json를 만들어야한다. tsconfig 파일은 TypeScript 문서를 보면서 설정하면 된다!

& npx tsc --init
$ touch rn-cli.config.js

rn-cli.config.js 에 다음과 같이 설정해준다.

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  },
};

이렇게 설정하고 파일을 tsx 파일로 변경하고 다음과 같이 시작하면 시작이 된다!

$ react-native run-ios