React와 TypeScript의 결합

이전 시간엔 TypeScript가 무엇이고 어떠한 타입과 특징이 있는지를 살펴보는 시간을 가졌다. 이전에 공부한 내용 외에도 TypeScript와 관련된 내용이 무궁무진하게 있으나 이는 나중에 살펴보도록 하고, 강의 내용에 따라 이번엔 React에서 TodoList를 만들면서 TypeScript을 사용하는 방법을 배워보도록 하겠다.

목차

1️⃣ Create React App adding TypeScript

2️⃣ tsx 파일에서 컴포넌트 만들기

3️⃣ 컴포넌트 내 props의 타입을 정의하기

4️⃣ class를 타입으로 활용하기

1️⃣ Create React App adding TypeScript

React와 관련하여 많이 쓰는 CRA에서는 TypeScript를 지원해주는 템플릿 버전도 존재한다.

해당 링크를 통해 들어가면 터미널에서 TypeScript가 포함된 CRA를 어떻게 설치할 수 있는지 명령어로 제시해주고 있다.

명령어를 통해 CRA를 설치하면 아래와 같이 프로젝트가 생성된 것을 볼 수 있다.

기존 CRA와 다른 것은 파일의 확장자들이 ts와 tsx로 변경됐다는 점이다.

npm start를 입력하면 나오는 화면도 살짝 다르다.

이런 화면이 보였다면 정상적으로 TypeScript가 포함된 CRA 버전을 설치했다는 걸 알 수 있다.

package.json 파일 내 dependencies를 보면, 기존 CRA와 비교할 때 몇 가지가 더 추가되어있다는 걸 알 수 있다.