JSX란 무엇인가?

1. JSX란 무엇인가?

**JSX(JavaScript XML)**는 자바스크립트의 구문 확장 버전입니다. 생김새는 HTML과 매우 닮았지만, 실제로는 자바스크립트 객체를 생성하는 코드로 변환됩니다.

리액트(React)에서 UI를 직관적으로 설계하기 위해 사용하며, "마크업(HTML)과 로직(JS)은 분리되어야 한다"는 고전적인 관념을 깨고 **"컴포넌트라는 하나의 단위로 묶자"**는 철학을 담고 있습니다.

---

2. 자바스크립트로 어떻게 변환되나요?

브라우저는 JSX를 직접 읽을 수 없습니다. 따라서 Babel이나 SWC 같은 컴파일러를 통해 순수 자바스크립트로 변환하는 과정이 필요합니다.

변환 방식은 리액트 버전에 따라 두 가지로 나뉩니다.

A. 과거 방식 (React 17 미만)

React.createElement() 함수 호출로 변환됩니다. 모든 파일 상단에 import React from 'react'가 필수였던 이유입니다.

• JSX 코드:

  const element = <h1 className="title">Hello World</h1>;
  

• 변환된 JS 코드:

  const element = React.createElement(
    'h1',
    { className: 'title' },
    'Hello World'
  );
  

B. 최신 방식 (React 17 이상)

JSX Transform이라는 새로운 기능 덕분에 React.createElement 대신 특별한 함수(jsx())를 자동으로 불러와 사용합니다. 이제 더 이상 JSX를 사용하기 위해 React를 명시적으로 import 하지 않아도 됩니다.

• 변환된 JS 코드 (내부적):

  import { jsx as _jsx } from 'react/jsx-runtime';
  
  const element = _jsx('h1', { 
    className: 'title', 
    children: 'Hello World' 
  });
  

---

3. 변환 과정 요약

1. 작성: 개발자가 .jsx 또는 .tsx 파일에 편리하게 HTML 형태의 코드를 작성합니다.
2. 컴파일: 빌드 도구(Webpack, Vite 등)가 Babel/SWC를 실행하여 JSX 태그를 함수 호출(_jsx 또는 createElement)로 바꿉니다.
3. 실행: 브라우저에서 이 함수가 실행되면 UI 구조를 설명하는 **일반 자바스크립트 객체(Virtual DOM)**가 생성됩니다.
4. 렌더링: 리액트가 이 객체를 바탕으로 실제 DOM을 업데이트합니다.

---

4. 왜 굳이 이렇게 하나요? (장점)

• 시각적 명확성: 복잡한 createElement 중첩보다 HTML 구조를 한눈에 파악하기 훨씬 쉽습니다.
• 안정성: 컴파일 과정에서 문법 오류를 잡아내고, 주입 공격(XSS)을 방지하는 보안 기능을 제공합니다.
• 표현력: 중괄호 { }만 쓰면 자바스크립트의 모든 표현식(변수, 함수, 연산)을 마크업 안에 녹여낼 수 있습니다.

한 줄 요약: JSX는 개발자가 보기 편하게 쓴 가짜 HTML이며, 실제로는 브라우저가 알아듣는 자바스크립트 함수 호출로 탈바꿈합니다.