React에 TypeScript 사용하는 방법

리액트와 TS를 함께 사용하는 방법을 소개한다.

 

방법에는 새롭게 프로젝트를 시작하는 방법과 기존 프로젝트에 TS를 적용하는 방법이 있다.

---

1. React + TypeScript로 새로운 프로젝트 시작하기

 

우선, 프로젝트를 만들고 싶은 디렉토리에서 터미널을 연다.

 

이후 npx create-react-app 프로젝트이름 --template typescript을 입력하면 된다.

 

이 방법을 이용하면 기본적으로 React에 TS를 이용할 수 있으며 주의할 점은 TS의 보호를 받기 때문에 Type에 신경써야 한다는 것이다.

 

또한, TS의 보호를 받고 싶다면 새로운 파일을 만들 때 확장자를 .tsx로 설정해야 한다.

 

2. 기존 프로젝트에 TypeScript 적용하기

 

기존 프로젝트에 TS를 적용하고 싶다면 npm install --save typescript @types/node @types/react @types/react-dom @types/jest를 입력하면 된다.

 

React를 위해 사용하는 것들에 대한 Type을 별도로 설치하는 과정이다.

 

또한, .jsx 확장자인 기존의 파일들을 .tsx 확장자로 바꿔줘야 한다.

 

예를 들어, App.jsx를 App.tsx로 수정한다.

---

주의할 점

 

주의할 점은 TS를 사용하면서 기존에 설치했던 패키지와 라이브러리에서 오류가 발생할 수 있다는 것이다.

 

TS로 이루어지지 않은 라이브러리나 패키지가 설치되어 있거나 설치하는 경우 TS 선언 파일을 따로 설정해야 하기 때문이다.

 

유명한 라이브러리에 대한 TS 선언 파일은 아래 링크에서 받을 수 있다.

DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions. (github.com)

GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.

또한, npm i --save-dev @types/원하는 패키지 또는 라이브러리 이름 또는 npm i @types/원하는 패키지 또는 라이브러리 이름 명령어를 통해 설치를 시도할 수 있다.

 

설치가 된다면 TS 선언 파일이 존재하는 것이고 오류가 발생하면 TS 선언 파일이 존재하지 않는다는 것이다.

---

추가사항

 

만약, index.tsx에서 오류가 발생한다면 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);로 내용을 수정하는 방법을 시도할 수 있다.