[React + TypeScript] 리액트 + 타입스크립트 프로젝트 만들기 1 (파일 생성 & 세팅)

프로젝트 생성

1. create-react-app 에서 Building your App > Adding TypeScript 참고
   
2. 원하는 파일 위치에서 터미널 입력하기

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

3. 새로운 프로젝트 생성 완료!

프로젝트 세팅

1. 불필요한 파일 삭제하기

   • App.test.tsx
   • logo.svg
   • reportWebVitals.ts
   • setupTests.ts

   

2. index.ts 수정
   reportWebVitals 관련 코드 삭제 및 <React.StrictMode> 삭제
   삭제한 후 코드는 위와 같다.

3. App.tsx 수정

• import React 삭제
  모던 리액트 프로젝트(타입스크립트 포함)는 해당 코드가 없어도 된다.
  

4. App.css 수정
   App.css 내 모든 코드 삭제하기

5. index.css 수정
   code 부분 삭제하기
   

👉🏽 참고

• Udemy 'React 완벽 가이드 with Redux, Next.js, TypeScript'
• create-react-app 공식 문서