[React] React + TypeScript 시작하기

일반적으로 평소 자바스크립트 기반 React 프로젝트를 만들 때

npx create-react-app 프로젝트명

을 한다. TypeScript도 별반 다를게 없다.

뒤에 typescript 로 된 프로젝트를 만든다고 명시해 주기만하면 typescript 기반 react 프로젝트를 만들 수 있다.

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

만들어진 폴더 구조는 아래와 같다.

.ts파일이 있는 반면에 .tsx파일도 있다. 이 둘의 차이점은 무엇일까?

.ts파일은 pure typescript 파일이다. javascript에서 .js에 대응한다고 생각하면 편하다

.tsx는 typescript의 react문법을 담아내기 위한 확장자 이다. .jsx에 대응한다고 생각하면 편하다.

이제 이프로젝트를 실행하여 웹상에 띄워보도록 하자.

이 프로젝트를 그대로 실행하면 다음과 같은 화면이 웹상에 띄워지게 된다.

npm run start