typescript

2020-12-16 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 시작하기

(0.60.2에 버그가 있는거 같습니다.) 이렇 모든 설정이 귀찮은 경우, 아래에 React Native CLI 명령어를 사용하여 Typescript를 기반으로하는 React Native 프로젝트를 생성할 수 있습니다.

react-native init SampleProject --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> {
  • Functional Component
import React from 'react';
...
interface Props {}
...
const App = ({  }: Props) => {
...

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

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

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

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
Posts