TypeScript : 타입스크립트와 리액트

타입스크립트 설정

1. 타입스크립트 설치

1-1) 기존 리액트 프로젝트에 타입스크립트 설치

기존 리액트 프로젝트에 타입스크립트를 추가하려면 아래 명령어를 사용하여 필요한 패키지를 설치합니다.

npm i @types/node @types/react @types/react-dom @types/jest

1-2. 타입스크립트 프로젝트 생성

리액트와 타입스크립트를 사용하는 새로운 프로젝트를 생성하려면 create-react-app을 사용할 수 있습니다.

이 명령은 기본적으로 리액트와 타입스크립트가 설정된 프로젝트를 생성합니다.

npx create-react-app 프로젝트명 --template typescript

2. TypeScript 설정 파일 생성

기존 리액트 프로젝트에 타입스크립트를 추가한 경우 프로젝트 루트에 tsconfig.json 파일을 생성합니다.

이 파일은 타입스크립트 컴파일러의 설정을 정의합니다.

// tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "strict": true,
    "allowJs": true,
    "esModuleInterop": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

 

컴파일러 옵션의 target 과 module를 각각 ES5와 CommonJS로 하는 이유는 이 리액트 앱이 어디서든지 잘 동작할 수 있도록 만들기 위해 위와 같이 설정합니다.

 

그리고 처음부터 타입스크립트 프로젝트 생성했을 경우 프로젝트 루트에 아래와 같은  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-jsx"
  },
  "include": [
    "src"
  ]
}

3. 기존 자바스크립트 파일을 타입스크립트로 변환

타입스크립트 컴파일러의 설정한 후에 보면 .js 파일은 입력 파일을 덮어쓸 수 없다는 TypeScript 에러가 발생하는데, 이는 app.js 와 index.js 파일을 열어보면 JSX 문법을 쓰고 있는데 TypeScript는 기본적으로 이런 js 확장자 파일로 부터 이 jsx 문법을 해석할 수 없습니다. 그래서 일단 JSX 문법들을 사용하는 이 파일들을 확장자를 이제 js 가 아니라 jsx로변 바꿔줘야 합니다. 그러면 에러가 해결됩니다.

 

그리고 나서 리액트 프로젝트의 기존 자바스크립트 파일들을 타입스크립트 파일로 변환합니다. .js 파일을 .tsx (리액트 컴포넌트가 포함된 경우) 또는 .ts (리액트 컴포넌트가 없는 경우)로 변경합니다.

 

근데 이때 주의할 점은 모든 파일들을 한꺼번에 다 TypeScript로 파일로 변경해도 되지만 그렇게 되면 동시에 많은 에러가 발생할 수 있으므로 JavaScript로 만들어진 프로젝트를 TypeScript로 나중에 변경할 때는 개별 파일별로 하나씩 변경하는게 훨씬 유리합니다. 

 

그래서 저희도 먼저 index.jsx -> index.tsx로 확장자 명을 변경해줍니다.

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);