[React] CRA로 TypeScript React 프로젝트 생성하기

오늘은 Create-React-App으로 TypeScript 프로젝트를 생성해보겠습니다..!

TypeScript 기반의 React 프로젝트를 설정하기 위해서는 여러가지 설정을 변경해야 하지만, 템플릿을 이용하면 훨씬 간편하게 프로젝트를 생성할 수 있습니다.

 

Template

$ npx create-react-app "project name" —template typescript

project name에는 생성하고자 하는 프로젝트의 이름을 넣으면 됩니다.

그러면 해당 이름의 폴더 안에 TypeScript 버전의 create-react-app이 생성됩니다.

 

다음으로, typescript를 사용하면서 필요한 라이브러리들을 설치합니다.

$ npm i --save react react-dom typescript
$ npm i --save-dev @types/react @types/react-dom @types/node

 

tsconfig.json 파일을 생성해 아래의 코드를 추가해줍니다.

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
}

생성 결과

생성된 프로젝트는 기본적으로 아래와 같은 구조로 생성됩니다.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

 

생성된 Javascript 프로젝트를 TypeScript 프로젝트로 변경 생성하는 방법으로도 설정해봅시다.

프로젝트 생성

다음 명령어를 사용하여 React 프로젝트를 생성할 수 있습니다.

$ npx create-react-app [project name]

 

다음 명령어를 사용하여 React 프로젝트를 실행해 봅시다.

#cd [project name]
npm start

 

문제없이 react 프로젝트가 생성되고 실행되었다면, 아래와 같은 화면을 브라우저에서 확인할 수 있습니다.

TypeScipt 적용

이제 create-react-app으로 생성한 React 프로젝트에 Typescript를 적용하는 방법에 대해서 알아봅시다.

 

create-react-app으로 생성한 React 프로젝트에 Typescript를 적용하기 위해서는 필요한 라이브러리를 설치해야 합니다.

다음 명령어를 통해 Typescript에 필요한 라이브러리를 설치합니다.

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

설정

TypeScipt를 사용하기 위해서는 tsconfig.json을 사용하여 Typescript에 관한 설정을 할 필요가 있습니다.

- TypeScript Handbook

- TypeScript Example on React

- TypeScript Handbook

 

tsconfig.json 파일을 생성하고 다음과 같이 수정합니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src",
    "custom.d.ts"
  ]
}

파일 확장자 수정

TypeScript가 소스코드를 인식할 수 있도록 파일의 확장자를 수정해야 합니다. src 폴더에 .js 파일 확장자를 .tsx 또는 .ts 파일 확장자로 변경합니다.

- App.js > App.tsx

- App.test.js > App.test.tsx

- index.js > index.tsx

- reportWebVitals.js > reportWebVitals.ts

- setupTests.js > setupTests.ts

TypeScript 에러 수정

.js 파일 확장자를 .tsx 또는 .ts로 수정하면 TypeScript가 에러를 출력합니다. 이 에러를 수정하기 위해 App.test.tsx와 App.tsx 파일을 열고 최상단에 다음을 추가합니다.

import React from 'react';

 

reportWebVitals.ts 파일을 열고 아래와 같이 수정합니다.

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
...

 

./src/custom.d.ts 파일을 만들고 아래와 같이 수정합니다.

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

실행

수정한 React 프로젝트가 제대로 동작하는지 확인하기 위해서 다음 명령어를 실행해 프로젝트를 실행합니다.

$ npm start