.js와 .jsx 차이 (cf. ts/tsx)

React에서 자바스크립트 파일을 생성할 때 확장자가 .js인 경우가 있고 .jsx일 때도 있었다. 큰 차이는 없어 보였지만 그래도 각각의 기능에 대해 정확하게 알아야 제대로 사용할 수 있을 거라 생각했다. 두 차이를 알아보자!

📍 JSX란?

JSX란 JavaScript XML의 약자로 JavaScript를 확장한 문법이다. 자바스크립트에서 HTML 문법을 사용할 수 있다. 공식 문서에서 설명하기로는 UI 관련 작업을 위해 권장이 되며 React에서 에러, 경고 메세지를 표시해준다고 한다.

// JSX
render() {
  return (
    <TestButton>
        Click here
    </TestButton>
   )
}

위의 JSX 코드는 자바스크립트 컴파일러인 @babel을 통해 javascript로 변환된다.

// JS
React.createElement(
	"button",
  {className: "sidebar"}
)

리액트에서는 JSX를 자바스크립트로 변환하기 때문에 javascript 문법을 사용하기 위해선 따로 mark를 해줘야 한다. 따라서 JavaScript를 JSX 내부에서 사용할 때에는 중괄호를 사용해야 한다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

중괄호로 감싼 JSX안에 변수 name을 사용하였다. 삼항연산자, map 등을 사용할 때에도 마찬가지이다. 이처럼 중괄호 안에 다양한 자바스크립트 표현식을 담을 수 있다.

📍 .js vs .jsx

먼저 스택오버플로우에서 ReactJS - .JS vs .JSX의 게시물을 읽어 보았다.
가장 높은 추천 수를 받은 답변의 내용은 '확장자로서의 차이가 없다'라는 것이다. 하지만 JSX는 자바스크립트 표준 문법이 아니기에 논쟁이 있을 수 있다고 했다.

하지만 위의 JSX 설명에서 보았듯이 어차피 리액트로 작성한 코드들은 자바스크립트로 변환된다. 따라서 컴포넌트 파일을 만들어 사용하는 리액트의 JSX 관련 코드는 .jsx로 만들고 나머지 일반 JavaScript 코드들은 .js로 만들면 된다.

📍 .ts vs .tsx

자바스크립트 외에 타입스크립트의 경우, .ts와 .tsx 확장자로 사용한다.
.tsx 에서는 JSX 문법을 사용할 수 있지만
.ts는 JSX 문법이 불가능하다. 오직 TypeScript만 사용 가능하다.

cf)
Introducing JSX
[React] .js vs .jsx
js 와 jsx 확장자의 차이