JSX와 Babel의 변환 과정 정리

1. JSX는 JavaScript가 아니다

• JSX는 JavaScript 확장 문법으로, 브라우저가 직접 실행할 수 없다.
• 그래서 브라우저에서 사용하려면 **트랜스파일링(transpiling)**이 필요하다.

 

2. Babel이 하는 일

• Babel은 JSX를 JavaScript 코드로 변환해주는 트랜스파일러다.
• JSX를 기본적으로 React.createElement() 호출 형태로 변환한다.

예시

const vdom = <p>Hello</p>;

↓ Babel 변환 ↓

const vdom = React.createElement("p", null, "Hello");

---

3. @jsx 주석 지시어

• Babel은 JSX를 어떤 함수로 변환할지 지정할 수 있도록 @jsx 주석을 지원한다.
• 이걸 사용하면 React.createElement 대신 원하는 함수로 커스텀할 수 있다.

예시

/* @jsx createElement */
const vdom = <p>Hello</p>;

↓ Babel 변환 ↓

const vdom = createElement("p", null, "Hello");

 

 

4.  import React from "react"; 

• React 17 이전에는 Babel이 JSX를 무조건 React.createElement(...)로 변환했기 때문에
  → 코드 안에서 React 변수를 사용하기 위해 반드시 import React from "react" 해야 했다.

예시 (React 16 기준)

import React from "react";  // 이게 없으면 에러
const element = <h1>Hello</h1>;

 

 

• React 17부터는 Babel이 자동으로 JSX 변환 함수 호출을 처리하도록 개선됨.
  (import React~ 안해도됨)