리액트에 typescript 설치 하기

리액트 앱에서 typescript 설치하기

Create React App Docs에 ‘Adding TypeScript 문서를 볼 수 있다.

https://create-react-app.dev/docs/adding-typescript/

여기에서 리액트 프로젝트를 만들 때 타입스크립트 기반 프로젝트로 생성하는 방법과 기존 프로젝트에 타입스크립트를 추가하는 방법이 설명되어 있다.

타입스크립트 기반 프로젝트로 생성하는 방법

npx create-react-app my-app --template typescript

or

yarn create react-app my-app --template typescript

기존 프로젝트에 타입스크립트를 추가하는 방법

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

or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

—template’라는 플래그를 명령어에 추가하게 되면 특정 템플릿을 사용해서 프로젝트를 생성하기 때문에 타입스크립트 기반의 프로젝트가 생성될 것이다.

기존 리액트 앱과 같지만 src 폴더를 열어보면 달라진 게 있는데 ‘.js’ 파일 대신에 ‘.tsx’ 파일이 있다.

확장자는 .ts가 아니라 .tsx인데 그 안에서 JSX 문법을 사용하기 때문이고 JSX 문법을 사용할 때 개발 툴에 불필요한 경고창이 뜨지 않게 하려면 확장자로 .tsx를 사용해야 한다.

서버는 이전처럼 동작하지만 밑단에서 추가로 한 가지 작업을 더 수행하는데 우리가 작성한 타입스크립트 코드를 자바스크립트로 컴파일하여 최적화하는 작업을 수행한다.

리액트와 바닐라 자바스크립트를 사용했을 때 개발 서버는 자바스크립트 코드를 받아 파일들을 하나로 묶는 작업을 수행하고 최적화 단계는 별도로 제공했다.

이 과정에 더해 추가적으로 타입스크립트를 자바스크립트로 컴파일하는 단계가 있다.

그래서 우리가 타입스크립트를 자바스크립트로 직접 변환할 필요가 없다.

package.json 파일을 보면 대부분 전에 봤던 의존성과 동일하지만 프로젝트에서 타입스크립트를 사용할 수 있도록 하는 typescript와 types 패키지도 있다.

이 ‘@types’ 패키지는바닐라 자바스크립트 라이브러리와 타입스크립트 프로젝트 사이 번역기 역할을 한다.

이전에는 react와 react-dom을 사용할 때 자바스크립트만을 사용했고 타입스크립트에서 이 라이브러리를 사용하고 타입스크립트 및 개발 툴이 제공하는 기능과 자동 완성 같은 기능을 사용하기 위해서는 언어 변환이 필요하다.

그래서 ‘@types/react’와 ‘@types/react-dom’는 바닐라 자바스크립트 라이브러리와 타입스크립트 프로젝트 사이에 타입 표기 기능을 추가해준다.

어떤 라이브러리에는 타입 표기 기능이 내장되어 있지만 그렇지 않은 라이브러리도 있기 때문에 타입 표기를 위한 의존성을 추가해준 것이다.