[React Native] 프로젝트설치 - Typescript

최근 카카오 로그인 기능을 추가해야 해서 리액트 네이티브를 타입 스크립트와 함께 사용해 보려 한다. https://github.com/react-native-seoul/react-native-kakao-login 의 내용을 적용하던 중 typescript에서만 동작하는 것을 확인하였다. 때문에 급하게 타입스크립트로 프로젝트를 재생성하면서 내용을 정리하기 위해 글을 작성하였다.

RN과 Typescript 설치하기

1. 프로젝트 설치하기

타입 스크립트로 세팅된 RN 앱 설치
참고할 깃헙은 이곳이다.
https://github.com/react-native-community/react-native-template-typescript

그리고 공식사이트는 여기다.
https://reactnative.dev/docs/typescript

• 기본적인 최신 버전 설치

  react-native init MyApp --template react-native-template-typescript

• 특정 버전을 설치
  깃헙 페이지에서 React Native <=> Template Version 을 참고하자.

  react-native init MyApp --template react-native-template-typescript@6.5.*

2. 만약 설치 중에 에러가 발생한다면..

info Setting up new React Native app in /Users/cckn/ws/AwesomeTSProject2
info Fetching template react-native-template-template-typescript...
yarn add v1.21.1
[1/4] 🔍  Resolving packages...
warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > left-pad@1.3.0: use String.prototype.padStart()
error An unexpected error occurred: "https://registry.yarnpkg.com/react-native-template-template-typescript: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/cckn/ws/AwesomeTSProject2/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
yarn remove v1.21.1
[1/2] 🗑  Removing module react-native-template-template-typescript...
error This module isn't specified in a package.json file.
info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command.
warn Failed to clean up template temp files in node_modules/react-native-template-template-typescript. This is not a critical error, you can work on your app.
(node:10378) UnhandledPromiseRejectionWarning: Error: Command failed: yarn add react-native-template-template-typescript
    at makeError (/Users/cckn/ws/AwesomeTSProject2/node_modules/execa/index.js:174:9)
    at Promise.all.then.arr (/Users/cckn/ws/AwesomeTSProject2/node_modules/execa/index.js:278:16)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:10378) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:10378) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

이를 위한 해결책은 https://github.com/react-native-community/react-native-template-typescript 여기를 참고하자.

레거시 react-native-cli에서는 해당 템플릿을 사용할 수 없고 새로운 CLI에서만 사용할 수 있다고 한다.
기존의 cli를 제거하고 npx를 이용하거나 npx를 이용하고 싶지 않다면 새로운 cli를 전역으로 설치해야 한다.

• uninstall legacy cli

npm uninstall -g react-native-cli

• install new cli

npm i -g @react-native-community/cli
  or
yarn global add @react-native-community/cli

• Project install

npx react-native init MyApp --template react-native-template-typescript
  or
react-native init MyApp --template react-native-template-typescript

간단하다.

---

3. 실행
   react-native run-android

 

---

typescript 타입스크립트