[JS] .js와 .jsx의 차이점 알아보기

 

.js 란?

    .js는 자바스크립트의 파일 확장자이며 일반적으로 사용하는 순수 자바스크립트 코드가 들어간다.

    브라우저가 이해할 수 있는 코드이고, 리액트를 쓰지 않아도 문제 없는 파일 형식이다.

 

[예시 코드]

function sayHello(name) {
  console.log("Hello, " + name);
}

sayHello("John");

---

.jsx 란?

    .jsx는 JavaScript XML의 약자이며 자바스크립트 코드 안에 HTML과 비슷한 문법을 쓸 수 있게 해주는 확장자이다.

    주로 React에서 사용되며, JSX 문법을 사용하면 마치 HTML처럼 UI를 구성할 수 있다.

    하지만 브라우저는 JSX를 이해하지 못하므로 컴파일 변환이 필요하다.

      * .js에서도 JSX 문법을 사용할 수는 있음!

[개념 알고가기 💡]
1. XML(eXtensible Markup Language)이란?
    확장 가능한 마크업 언어로, HTML처럼 태그로 데이터를 표현하지만 HTML보다 훨씬 더 유연하고 데이터 중심적이다.
    원래는 데이터 저장/전송용 포맷으로 만들어졌으며, 특징은 다음과 같다.
    1) 사용자가 직접 태그를 정의 가능
    2) 구조적 데이터 표현에 적합
    3) 사람도 읽기 쉽고, 기계도 파싱하기 쉬움
    * 단순히 데이터를 표현하는 방법이며, 실제 동작은 하지않고 데이터를 설명하는 "형식"이다.

    * 따라서 JSX는 JavaScript XML이란 이름이지만, 실제로는 XML이 아니고 XML처럼 생긴 문법을 자바스크립트에 끼워 넣은 것이다.

 

[예시 코드]

export default function Hello() {
  return <h1>Hello, world!</h1>;
}

---

 

.js 확장자에서도 JSX 문법을 사용할 수 있는데, 왜 굳이 .jsx로 사용하면서 컴파일 변환을 해줘야하는거지?

---

.js에서도 JSX를 사용할 수 있는 이유

 

    그 이유는 Babel이나 Webpack 같은 빌드 도구가 .js 파일 안에서도 JSX 문법을 인식하고 변환해줄 수 있게 설정되어 있기 때문이다.

    그렇기 때문에 .js 파일에서 JSX 문법을 사용한다해도, 브라우저는 애초에 JSX를 이해하지 못하기 때문에 컴파일 변환은 일어난다.

---

그렇다면 .jsx로 확장자를 지정해주는 이유는 뭘까?

     1) 가독성: JSX가 들어있다는 걸 파일 이름만 보고 바로 알 수 있다.

     2) 협업: 다른 개발자에게 "이 파일은 리액트 컴포넌트입니다"라는 신호를 준다.

     3) 에디터 지원: .jsx 파일은 대부분의 에디터가 JSX 문법 강조를 더 잘 지원한다.

     => 즉, 기술적으로 꼭 .jsx를 써야 하진 않지만, 명확한 의도를 전달하는 좋은 습관이 될 수 있다!

---

 

그렇다면 컴파일 변환은 어떻게 일어나는 걸까?

---

JSX의 컴파일 흐름

 

1) JSX 코드 작성

const element = <h1>Hello</h1>;

 

2) Babel이 JSX 코드를 자바스크립트로 변환

const element = React.createElement("h1", null, "Hello");

 

3) 변환된 코드는 브라우저에서 실행 가능!

---

무엇이 컴파일을 해주는 걸까?

[Babel (JS 변환기)]
  - JSX → JavaScript
  - ES6+ → ES5
  - TypeScript → JavaScript

[Webpack (번들러)]
  - 여러 JS 파일들을 하나로 묶고 Babel을 연동해서 변환 과정을 처리하게 함

 

그렇다면 실제 개발 흐름은 다음과 같다.

[개발 흐름 🔍]
1. 소스 코드 작성 (.jsx, .ts, 최신 문법)
2. Babel이 변환 (JSX → 일반 JS)
3. Webpack이 번들링 (여러 파일 → 하나의 main.js)
4. 브라우저는 변환된 JS만 실행

---

.js 와 .jsx 차이점 요약

항목	.js 파일	.jsx 파일
목적	일반 자바스크립트 코드	JSX 문법을 포함한 자바스크립트 코드
사용 환경	전통적인 웹/서버/Node 등 어디든 가능	주로 React에서 컴포넌트를 만들 때 사용
JSX 사용	가능 (하지만 명확하지 않음)	가능 + JSX가 포함된다고 명확히 표시
컴파일 필요 여부	JSX가 없으면 바로 실행 가능	반드시 Babel 등의 변환이 필요
추천 사용처	유틸 함수, API 로직, 설정 파일 등	React 컴포넌트 작성할 때