React Native에서 TypeScript 사용하기

2021-07-04 hit count image

react-native 프로젝트에 TypeScript를 적용하여 개발해 보자.

react-native 프로젝트 생성

아래에 명령어를 이용하여 RN 프로젝트를 생성합니다.

react-native init proejct-name

TypeScript에 필요한 라이브러리 설치

TypeScript가 동작할 수 있도록 필요한 라이브러리을 설치합니다.

npm install typescript @types/react @types/react-native --save-dev

TypeScript 라이브러리

  • typescript: TypeScript를 설치한다.
  • @types/react: TypeScript에 필요한 react의 type을 설치한다.
  • @types/react-native: TypeScript에 필요한 react-native의 type을 설치한다.

TypeScript 설정

TypeScript를 설정하여 react-native가 동작하도록 만듭니다.

tsconfig.json 만들기

프로젝트 root 폴더에 tsconfig.json파일을 생성하고 아래에 내용을 복사합니다.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6", "es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "skipLibCheck": true
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

자세한 내용은 공식 홈페이지를 참조하세요.

React Native CLI로 TypeScript 시작하기

이렇게 모든 설정이 귀찮은 경우, 아래에 React Native CLI 명령어를 사용하여 TypeScript를 기반으로하는 React Native 프로젝트를 생성할 수 있습니다.

npx react-native init SampleProject --template react-native-template-typescript

TypeScript로 코딩하기

App.js를 App.tsx로 파일명을 수정하고 TypeScript 형식으로 코딩합니다.

  • Class Component
import React from 'react';
...
interface Props {}
interface State {}
...
export default class App extends React.Component<Props, State> {
  • Function Component
import React from 'react';
...
interface Props {}
...
const App = ({  }: Props) => {
...

완료

이것으로 React Native에서 TypeScript를 적용하고 TypeScript를 사용하는 방법에 대해서 알아보았습니다. 이제 React Native 프로젝트에서도 TypeScript를 사용하여 타입 체크를 해 보시기 바랍니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통
Posts