리액트 확장자명 헷갈리면 들어와! / .js, .jsx, .tsx

확장자?

리액트는 .js, .jsx, .tsx 확장자를 사용해. 각각의 확장자는 어떤 차이가 있을까?

 

컴포넌트 파일의 확장자 형식

리액트에서 사용할 수 있는 자바스크립트 파일 형식은 크게 3가지야. 하나씩 살펴보자.

---

.js

이건 가장 일반적인 자바스크립트 파일 형식이야. 하지만 리액트에서는 바벨(Babel)과 같은 트랜스파일러 덕분에 .js 파일에서도 리액트 문법인 JSX를 사용할 수 있어. 보통 create-react-app 패키지로 생성한 리액트 프로젝트는 .js 파일을 기본으로 사용해.

리액트에서 바벨과 같은 역할을 하는 도구가 바로 react-scripts 패키지야. 이 패키지는 Create React App(CRA)에서 프로젝트 설정과 관리를 도와주는 스크립트 모음이야.

{
  "dependencies": {
    "react-scripts": "5.0.1"
  }
}

 

---

.jsx

JSX(Javascript XML)는 자바스크립트로 HTML 마크업을 편하게 작성하기 위해 페이스북 팀이 개발한 새로운 언어 형식이야. 리액트는 기본적으로 JSX 문법을 사용해. 그래서 확장자를 .js 대신에 .jsx로 사용하기도 해.

Vite 프로젝트에서는 @vitejs/plugin-react 패키지가 리액트에서 웹팩과 바벨의 역할을 해줘.

{
  "devDependencies": {
    "@vitejs/plugin-react": "4.2.1"
  }
}

🤚🏻마크업이 뭐야?!?

마크업이란, 문서나 데이터의 구조를 나타내기 위해 태그 등을 이용해 표시하는 방법을 말해. 쉽게 말해, 우리가 웹 페이지를 만들 때 HTML을 사용하는데, 이 HTML이 바로 마크업 언어의 한 종류야.

---

.tsx

TSX(Typescript XML)는 .jsx의 타입스크립트 버전이야. 타입스크립트를 사용하는 리액트 프로젝트에서는 .tsx 확장자를 사용해.

 

그러면 어떤 걸 사용하지?

.js나 .ts, .jsx, .tsx는 확장자의 의미에서 큰 차이가 없어. 하지만 JSX 문법이 순수한 자바스크립트 문법은 아니기 때문에, 확장자가 .js나 .ts로 끝나는 파일에 JSX를 작성하는 것에 대해 논란이 있어. Vite에서는 공식적으로 .jsx와 .tsx 형식의 파일을 권장하기 때문에 되도록이면 이 형식을 사용하는 게 좋아.

 

• .js: 일반 자바스크립트 파일. 바벨 덕분에 JSX 사용 가능.
• .jsx: JSX 문법을 사용하는 자바스크립트 파일.
• .tsx: JSX 문법을 사용하는 타입스크립트 파일.

이제 리액트 프로젝트에서 어떤 확장자를 사용해야 할지 더 명확하게 이해할 수 있을 거야. 상황에 맞게 적절한 확장자를 선택해서 사용해보자!