JSX — HTML처럼 생긴 그 문법의 정체

JSX(JavaScript XML)는 자바스크립트의 확장 문법이에요. 화면에 그릴 모양을 HTML처럼 생긴 태그로 자바스크립트 코드 안에 바로 적을 수 있게 해줍니다. 아래를 보면 "이게 HTML인가 자바스크립트인가?" 싶은데, 둘 다예요 — 자바스크립트인데 HTML 모양을 빌려 쓴 거죠.

const element = <h1>안녕, 리액트!</h1>;
// 변수(element)에 "화면 조각"을 담았어요. 이 <h1>…</h1> 부분이 바로 JSX예요.

그런데 여기서 아주 중요한 사실 하나. 브라우저는 JSX를 직접 읽지 못해요. <h1>이 자바스크립트 문법에는 없거든요. 그래서 Babel(바벨)이라는 변환기가 JSX를 진짜 자바스크립트 함수 호출로 바꿔줍니다. 아래처럼요.

// 우리가 쓴 JSX
const element = <h1 className="title">안녕</h1>;

// Babel이 변환한 실제 자바스크립트 (개념)
const element = React.createElement(
  "h1",                  // 태그 이름
  { className: "title" },// 속성(props)
  "안녕"                  // 자식(children)
);

function App() {                        // ← 그냥 JavaScript (함수)
  function handleClick() {              // ← 그냥 JavaScript
    alert('버튼이 눌렸어요!');           // ← 그냥 JavaScript (브라우저 기능)
  }
  return (
    <button onClick={handleClick}>클릭</button>   // ← 여기서만 섞임
  );
}

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);   // [2,4,6] — 100% 자바스크립트

const el = <h1>안녕</h1>;   // const el = 은 JS, <h1>…</h1> 이 JSX

const [n, setN] = useState(0);   // useState = React, [n, setN] 구조분해 = JS

function f() { ... }              // { } = 자바스크립트 (함수 몸통)
const p = { name: '철수' };       // { } = 자바스크립트 (객체)

<h1>{name}</h1>                   // { } = JSX 문법 (JSX 안에 JS 값 넣기)
<button onClick={handleClick}>   // { } = JSX 문법

const [n, setN] = useState(0);        // use로 시작하는 훅 → React
useEffect(() => { ... }, []);         // 훅 → React
function App() { return <div/> }      // 대문자 컴포넌트 + JSX 반환 → React
<Button label="확인" />               // 대문자 태그(내 컴포넌트) + props → React

JSX는 HTML 모양이지만, 중간에 중괄호 { }를 열면 그 안에서 자바스크립트 값을 꺼내 쓸 수 있어요. 변수, 계산식, 객체 속성, 함수 호출 결과 등 "값이 되는 것"이면 무엇이든 들어갈 수 있어요.

const name = "지훈";
const user = { age: 20 };

const element = (
  <div>
    <p>안녕, {name}!</p>         {/* 변수 */}
    <p>1 + 2 = {1 + 2}</p>       {/* 계산식 */}
    <p>나이: {user.age}살</p>     {/* 객체 속성 */}
    <p>대문자: {name.toUpperCase()}</p>  {/* 함수 호출 결과 */}
  </div>
);

JSX는 결국 자바스크립트예요. 그래서 자바스크립트에서 이미 예약된 단어와 겹치거나, 문법 규칙에 맞춰 HTML과 다르게 써야 하는 것들이 있어요. 대표적인 다섯 가지를 봅시다.

// HTML:  <div class="box">
// JSX:
const el = <div className="box">내용</div>;

// HTML:  <label for="email">
// JSX:
const el = <label htmlFor="email">이메일</label>;

// HTML:  <button onclick="doSomething()">
// JSX:
const el = <button onClick={handleClick}>클릭</button>;
// 속성값이 문자열 "..."이 아니라, 중괄호 안의 함수라는 점에 주목!

// HTML:  <img src="a.png">   <br>   <input type="text">
// JSX (반드시 닫기):
const el = (
  <div>
    <img src="a.png" />
    <br />
    <input type="text" />
  </div>
);

// HTML:  <div style="color:red; background-color:yellow">
// JSX (객체로!):
const el = <div style={{ color: 'red', backgroundColor: 'yellow' }}>내용</div>;
//                      ▲바깥 {}=JS   ▲안쪽 {}=객체

JSX 한 덩어리는 최상위 요소가 반드시 하나여야 해요. 아래처럼 나란히 두 개를 반환하면 에러가 납니다.

// ❌ 에러! 최상위가 <h1>과 <p> 두 개
const el = (
  <h1>제목</h1>
  <p>본문</p>
);

function test() {
  return 10;
}
// 이 함수의 결과 → 10

function test() {
  return 10;
  return 20;   // 이 줄은 실행조차 안 돼요
}

function App() {
  return (
    <h1>안녕하세요</h1>
  );
}   // ✅ <h1> 하나를 반환 → OK

function App() {
  return (
    <h1>제목</h1>
    <p>본문</p>
  );
}   // ❌ 에러

function App() {
  return (
    <div>
      <h1>제목</h1>
      <p>본문</p>
    </div>
  );
}

<section>
  <h1>제목</h1>
  <p>내용</p>
</section>

<main>
  <h1>제목</h1>
  <p>내용</p>
</main>

<>
  <h1>제목</h1>
  <p>내용</p>
</>

function Profile() {
  return (
    <h2>이름</h2>
    <p>소개</p>
  ); // ❌ 에러! 최상위 요소가 2개
}

이걸 해결하려고 예전에는 흔히 `<div>`로 감쌌습니다.

function Profile() {
  return (
    <>
      <h2>이름</h2>
      <p>소개</p>
    </>
  ); // ✅ 실제 HTML엔 <div> 없이 <h2>, <p>만 남음
}

해결 방법 1 — <div>로 감싸기. 가장 쉬운 방법이에요.

// ✅ div 하나로 감싸기
const el = (
  <div>
    <h1>제목</h1>
    <p>본문</p>
  </div>
);

해결 방법 2 — Fragment <>…</>. <div>로 감싸면 실제 화면에 불필요한 태그가 하나 더 생겨요. 그게 싫을 때, 화면에 아무 태그도 남기지 않고 묶어주는 Fragment(프래그먼트)를 씁니다. 빈 태그 <> … </> 모양이에요.

// ✅ Fragment로 감싸기 (실제 DOM에 여분의 태그가 안 생겨요)
const el = (
  <>
    <h1>제목</h1>
    <p>본문</p>
  </>
);
// <>…</> 는 <React.Fragment>…</React.Fragment> 의 짧은 형태예요.

JSX 태그 안쪽에 주석을 달 때는 {/* … */} 형태를 써요. 중괄호로 자바스크립트 세상을 열고, 그 안에 자바스크립트 주석 /* */을 넣는 구조예요. HTML 주석 <!-- -->은 JSX 안에서 그대로 쓰면 안 됩니다.

const el = (
  <div>
    {/* 이건 JSX 안의 주석이에요 */}
    <h1>안녕</h1>
    {/* 여러 줄
        주석도 가능 */}
  </div>
);