[typescript] 타입스크립트와 Babel을 사용한 React Native 프로젝트 설정 방법

20 Dec 2023

typescript

React Native 프로젝트에서 TypeScript와 Babel을 함께 사용하여 강력한 타입 시스템과 최신 JavaScript 기능을 활용할 수 있습니다. 이번 블로그에서는 React Native 프로젝트에 TypeScript와 Babel을 설정하는 방법에 대해 살펴보겠습니다.

시작하기 전에

시작하기 전에, Node.js와 npm이 설치되어 있어야 하며, React Native 프로젝트가 이미 설정되어 있어야 합니다.

단계 1: TypeScript 및 관련 패키지 설치

먼저 프로젝트 루트 디렉토리에서 다음 명령을 실행하여 TypeScript와 관련 패키지를 설치합니다:

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

단계 2: Babel 및 관련 패키지 설치

이어서 Babel 및 Babel 프리셋을 설치합니다:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript

단계 3: Babel 설정 파일 생성

프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고 다음과 같이 내용을 작성합니다:

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

단계 4: TypeScript 설정 파일 생성

프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성하고 다음과 같이 내용을 작성합니다:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

단계 5: Babel 및 TypeScript 통합

babel.config.js 파일을 프로젝트 루트 디렉토리에 생성하고 아래 내용을 작성합니다:

module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript']
};

단계 6: 파일 확장자 변경

이제 TypeScript 파일의 확장자를 .js에서 .tsx로 변경합니다.

빌드 및 실행

이제 TypeScript와 Babel 설정이 완료되었으므로, 프로젝트를 빌드하고 실행할 수 있습니다.

이제 TypeScript 및 Babel을 사용하여 React Native 프로젝트를 설정하는 방법에 대해 알게 되었습니다. 이 설정을 통해 코드의 안정성을 높이고 최신 JavaScript 기능을 활용할 수 있습니다.