React JSX

---

🧾 JSX란?

정의

JSX(JavaScript XML)는 JavaScript 안에서 HTML처럼 보이는 문법을 작성할 수 있게 해주는 확장 문법이다.

React에서는 UI를 선언적으로 표현하기 위해 JSX를 많이 사용한다.

🧩 특징

• JavaScript와 HTML 표현을 함께 쓸 수 있다.
• JSX는 실제로는 JavaScript로 변환된다.
• 하나의 컴포넌트는 하나의 루트 요소를 반환해야 한다.
• JSX 안에서는 JavaScript 표현식을 중괄호 {}로 감싼다.

🛠️ 기본 규칙

• class 대신 className을 사용한다.
• for 대신 htmlFor를 사용한다.
• 태그는 반드시 닫아야 한다.
• 여러 요소를 반환할 때는 Fragment를 사용할 수 있다.

🧪 사용 예시

function Greeting() {
  const name = "React";

  return (
    <div className="box">
      <h1>Hello, {name}</h1>
      <p>JSX는 JavaScript 안에서 UI를 표현한다.</p>
    </div>
  );
}

⚖️ 주의할 점

• JSX 안에서는 일반 문자열보다 JavaScript 표현식을 적극적으로 활용한다.
• 조건문이나 반복문은 JSX 바깥에서 처리하거나 삼항 연산자, 배열 매핑으로 처리한다.
• 너무 복잡한 로직을 JSX 내부에 직접 넣으면 읽기 어려워진다.

📌 정리

• JSX는 React에서 UI를 표현하는 핵심 문법이다.
• 실제 HTML과 비슷해 보이지만 JavaScript 문법 확장이라는 점이 중요하다.
• Component, Fragment, EventHandler, Props와 같이 이해하면 좋다.

---

연결문서

• React-Component
• React-Fragment
• React-EventHandler
• React-Props