💡 JSX 완전 정복

---

📝 JSX란?

JSX(JavaScript XML) 는 JavaScript에 XML/HTML을 결합한 문법 확장임

React에서 UI를 표현하기 위해 사용하는 문법으로, XML처럼 보이지만 실제로는 JavaScript이다.

javascript
jsx
복사편집
const element = <h1>Hello, world!</h1>;

위 코드는 브라우저에서 실행되기 전 다음과 같은 JavaScript 코드로 변환됨

plain
js
복사편집
const element = React.createElement('h1', null, 'Hello, world!');

✅ 따라서 브라우저는 JSX를 직접 이해하지 못하고, Babel 등의 트랜스파일러가 JSX를 JavaScript로 변환해줌.

---

🔍 왜 JSX를 사용할까?

---

🧩 JSX 문법 상세

1. HTML처럼 보이지만 JavaScript이다

javascript
jsx
복사편집
const title = <h1>Welcome</h1>;

• <h1>은 실제 HTML이 아니라 React.createElement()로 변환되는 함수 호출이다.

---

2. 태그는 반드시 닫아야 한다

JSX에서는 모든 태그가 닫혀 있어야 함:

javascript
jsx
복사편집
// ❌ 오류
const img = <img src="logo.png">

// ✅ 올바른 사용
const img = <img src="logo.png" />;

---

3. 하나의 부모 태그로 감싸야 한다

javascript
jsx
복사편집
// ❌ 오류
return (
  <h1>안녕</h1>
  <p>반가워</p>
);

// ✅ 올바른 사용
return (
  <div>
    <h1>안녕</h1>
    <p>반가워</p>
  </div>
);

또는 Fragment(<> </>) 사용 가능:

javascript
jsx
복사편집
return (
  <><h1>안녕</h1>
    <p>반가워</p>
  </>
);

---

4. JavaScript 표현식은 {} 안에

javascript
jsx
복사편집
const name = "Mokoko";
const greeting = <h1>Hello, {name}</h1>;

• {} 안에서는 JS 표현식, 변수, 함수 호출 등 모두 가능
• if문처럼 문(statement)은 사용할 수 없음 → 조건부 렌더링은 삼항 연산자 사용

javascript
jsx
복사편집
{isLoggedIn ? <Logout /> : <Login />}

---

5. 속성은 카멜케이스로

JSX에서 HTML 속성은 카멜 케이스(CamelCase) 로 작성해야 한다.

javascript
jsx
복사편집
<button className="btn" onClick={handleClick}>
  클릭
</button>

---

6. JavaScript 코드와 HTML의 혼합

JSX는 JavaScript 문법 안에서 HTML 요소를 작성할 수 있다.

javascript
jsx
복사편집
const user = { name: "Mokoko", age: 24 };

const profile = (
  <div>
    <h2>{user.name}</h2>
    <p>{user.age}세</p>
  </div>
);

---

7. 조건부 렌더링

javascript
jsx
복사편집
{isLoggedIn && <p>환영합니다!</p>}

javascript
jsx
복사편집
{isDarkMode ? <DarkTheme /> : <LightTheme />}

---

8. 리스트 렌더링

javascript
jsx
복사편집
const items = ['사과', '바나나', '포도'];

const list = (
  <ul>
    {items.map((item, idx) => (
      <li key={idx}>{item}</li>
    ))}
  </ul>
);

✅ key는 리스트 항목에 고유한 식별자로 반드시 부여

---

9. 함수형 컴포넌트에서의 JSX

javascript
jsx
복사편집
function Welcome(props) {
  return <h1>안녕하세요, {props.name}님</h1>;
}

또는 화살표 함수:

javascript
jsx
복사편집
const Welcome = ({ name }) => <h1>안녕하세요, {name}님</h1>;

---

10. Babel이 어떻게 변환하는지 예시

javascript
jsx
복사편집
const element = <h1 className="title">Hello</h1>;

⬇️ Babel에 의해 다음으로 변환됨

plain
js
복사편집
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

---

✅ JSX 핵심 요약