목차
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를 사용하여 타입 체크를 해 보시기 바랍니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
지금 보고 계신 블로그를 작성하는
관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)