3.3.1 컴포넌트 확장자
리액트에서는 컴포넌트를 작성할 때 .js, .jsx, .ts, .tsx 같은 파일 확장자를 사용할 수 있습니다. 하지만 확장자에 따라 JSX 문법을 사용할 수 있는지 여부가 달라집니다. 확장자별 JSX 지원 여부는 다음 표에서 확인할 수 있습니다.
표 3-1 CRA와 Vite 기반 프로젝트의 확장자별 JSX 지원 여부
|
확장자 |
CRA |
Vite |
|
.js |
JSX 지원 |
JSX 지원 |
|
.jsx |
JSX 지원 |
JSX 지원 |
|
.ts |
JSX 지원 안 함 |
JSX 지원 안 함 |
|
.tsx |
JSX 지원 |
JSX 지원 |
관용적으로 자바스크립트 기반 리액트 애플리케이션에서는 .jsx, 타입스크립트 기반의 리액트 애플리케이션에서는 JSX 문법을 함께 사용할 수 있는 .tsx 확장자를 사용합니다. 이 책은 타입스크립트 기반으로 리액트를 설명하므로 컴포넌트는 .tsx 확장자를 사용해 작성합니다.