JSX 기초

📌 JSX는 HTML이 아니다

처음 리액트를 보면 JS 코드 안에 HTML처럼 생긴 것이 있어서 당황스럽습니다. 이것을 JSX(JavaScript XML)라고 합니다. JSX는 HTML과 비슷하게 생겼지만, 실제로는 JavaScript입니다. 브라우저는 JSX를 직접 이해하지 못합니다 — Babel 같은 도구가 JSX를 순수 JS 함수 호출로 변환해줍니다.

// 우리가 쓰는 JSX
const element = <h1 className="title">안녕하세요</h1>

// Babel이 변환한 실제 JS
const element = React.createElement('h1', { className: 'title' }, '안녕하세요')

이 변환 과정을 이해하면 왜 JSX가 특정 규칙을 따라야 하는지 명확해집니다.

🔢 표현식 삽입 — 중괄호 {}

JSX에서 중괄호 {} 안에는 모든 JavaScript 표현식을 넣을 수 있습니다. 표현식이란 값으로 평가되는 코드입니다.

const name = '김민준'
const age = 25
const isPremium = true

function Profile() {
  return (
    <div>
      {/* 변수 삽입 */}
      <p>이름: {name}</p>

      {/* 계산식 */}
      <p>내년 나이: {age + 1}세</p>

      {/* 삼항 연산자 */}
      <p>등급: {isPremium ? '프리미엄' : '일반'}</p>

      {/* 함수 호출 */}
      <p>대문자: {name.toUpperCase()}</p>
    </div>
  )
}

반면 if문, for문처럼 값으로 평가되지 않는 구문(statement)은 중괄호 안에 직접 넣을 수 없습니다. 대신 삼항 연산자나 함수 안에서 처리합니다.

🏷️ className — HTML과 다른 속성명

JSX는 HTML처럼 생겼지만 속성명이 다른 것들이 있습니다. 가장 중요한 차이는 class 대신 className을 쓴다는 것입니다. class는 JavaScript의 예약어이기 때문입니다.

HTML	JSX	이유
class="btn"	className="btn"	class는 JS 예약어
for="input"	htmlFor="input"	for도 JS 예약어
onclick="fn()"	onClick={fn}	카멜케이스 + 함수 참조
tabindex="0"	tabIndex={0}	카멜케이스
style="color:red"	style={{ color: 'red' }}	객체 형태

📦 하나의 부모로 감싸기 규칙

JSX는 반드시 하나의 부모 요소를 반환해야 합니다. 이 규칙은 JSX가 React.createElement() 함수 호출로 변환되기 때문에 생기는 제약입니다 — 함수는 하나의 값만 반환할 수 있습니다.

// ❌ 오류 — 두 개의 요소가 최상위에 있음
function App() {
  return (
    <h1>제목</h1>
    <p>내용</p>
  )
}

// ✅ div로 감싸기
function App() {
  return (
    <div>
      <h1>제목</h1>
      <p>내용</p>
    </div>
  )
}

// ✅ Fragment로 감싸기 (불필요한 div 없이)
function App() {
  return (
    <>
      <h1>제목</h1>
      <p>내용</p>
    </>
  )
}

Fragment(<></>)는 실제 DOM 요소를 추가하지 않고 여러 요소를 묶어주는 리액트 특수 컴포넌트입니다. 불필요한 <div> 중첩을 피할 때 사용합니다.

🔚 자기 닫기 태그(Self-closing)

HTML에서는 <img>, <input> 등이 닫는 태그 없이 사용됩니다. JSX에서는 자식이 없는 모든 요소를 반드시 />로 닫아야 합니다.

// ❌ HTML처럼 쓰면 오류
<img src="photo.jpg">
<input type="text">

// ✅ JSX에서는 반드시 닫기
<img src="photo.jpg" />
<input type="text" />

💬 JSX 주석

JSX 안에서 주석을 쓰는 방법도 HTML과 다릅니다:

function Component() {
  return (
    <div>
      {/* JSX 안의 주석은 이렇게 씁니다 */}
      <p>내용</p>
      {/* 여러 줄도
          가능합니다 */}
    </div>
  )
}

✅ 정리

• JSX는 JS 안에 HTML처럼 쓰는 문법이며, 빌드 시 React.createElement() 호출로 변환됩니다.
• 중괄호 {}로 모든 JS 표현식을 삽입할 수 있습니다.
• class 대신 className, 이벤트는 카멜케이스(onClick)로 씁니다.
• 반드시 하나의 부모 요소(또는 Fragment)로 감싸야 합니다.
• 자식이 없는 요소는 />로 닫습니다.