JSX 기본 문법

1. 🔄 JSX 중괄호 안에는 JavaScript 표현식만 가능

중괄호 {} 안에는 반드시 **값으로 평가될 수 있는 JavaScript 표현식(expression)**만 들어가야 합니다.

✅ 예시:

const name = "Teo";

return <div>{name}</div>; // ✅ 출력: Teo

❌ 잘못된 예시:

return <div>{if (true) { return 'Hi'; }}</div>; // ❌ 오류 발생

---

2. 🚫 Boolean, null, undefined, 객체는 화면에 렌더링되지 않음

숫자, 문자열, 배열은 출력 가능하지만, true, null, undefined, 객체는 화면에 나타나지 않습니다.

✅ 예시:

<div>{123}</div>        // ✅ 출력: 123
<div>{'Hello'}</div>    // ✅ 출력: Hello
<div>{[1, 2, 3]}</div>   // ✅ 출력: 123
<div>{true}</div>       // ❌ 출력되지 않음

---

3. 🧹 태그는 항상 닫혀 있어야 함

모든 JSX 태그는 반드시 닫혀 있어야 해요. 특히 <img>, <input> 같은 self-closing 태그도 슬래시(/)를 꼭 붙여야 합니다.

✅ 예시:

<input type="text" />   // ✅
<img src="image.png" /> // ✅

❌ 잘못된 예시:

<input type="text">     // ❌ 오류 발생

---

4. 🧱 JSX는 최상위 태그가 하나만 존재해야 함

여러 개의 태그를 리턴할 때는 꼭 하나의 부모 태그로 감싸야 해요. 그렇지 않으면 오류가 발생합니다.

✅ 예시:

return (
  <div>
    <h1>Hello</h1>
    <p>Welcome</p>
  </div>
);

또는 짧은 문법 <> </>도 사용할 수 있어요.

return (
  <>
    <h1>Hello</h1>
    <p>Welcome</p>
  </>
);

❌ 잘못된 예시:

return (
  <h1>Hello</h1>
  <p>Welcome</p>
); // ❌ 오류 발생