React에 TypeScript 적용하기

API를 이용한 프로젝트를 하다보니 사용하는 데이터의 양이 늘어나면서 이들을 더 구체적으로 표현하면 좋은 코드가 될 것 같아 시작하게 되었습니다.

 

 📌 React에 TypeScript 적용하기

• React 프로젝트를 생성하기 전일 때

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

 

• React 프로젝트를 생성한 후일 때

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

 

 

📌 결과

TypeScript 적용 전

TypeScript를 적용하기 전인 React 프로젝트의 파일들입니다.
확장자명은 js, css로 이루어져 있는걸 확인할 수 있습니다.

 

TypeScript 적용 후

TypeScript를 적용한 후인 React 프로젝트의 파일입니다.
js였던 확장자명은 tsx로 바뀌었고, css는 그대로 유지됩니다.