React 📌3. JSX란?📝

---

🌟 JSX란? 🌟

JSX (JavaScript XML)은 React에서 UI를 구성할 때 사용하는 문법 JavaScript 코드 안에서 HTML과 비슷한 문법을 사용할 수 있도록 도와준다. JSX는 JavaScript의 확장 문법이라서 브라우저가 직접 이해하지 못하지만, Babel 같은 트랜스파일러가 JavaScript로 변환해 주기 때문에 문제없이 사용할 수 있다! 😊

---

📌 JSX의 기본 문법

1. HTML처럼 보이지만 JavaScript!

const element = <h1>Hello, JSX!</h1>;

위 코드처럼 HTML 태그를 JavaScript 코드 안에서 사용할 수 있어! 하지만 실제로는 React.createElement로 변환된다는 점이 중요해. 예를 들면:

const element = React.createElement('h1', null, 'Hello, JSX!');

위처럼 변환되지만 JSX 덕분에 더 직관적으로 작성할 수 있어! 🎉

---

2. JSX 안에서 JavaScript 표현식 사용하기

중괄호 {}를 사용하면 JavaScript 표현식을 넣을 수 있어!

const name = "React";
const element = <h1>Hello, {name}!</h1>;

💡 주의할 점: if, for 같은 문장(statement)은 JSX 내부에서 직접 사용할 수 없어. 삼항 연산자 ? : 또는 &&를 활용하자!

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? "Welcome back!" : "Please log in."}</h1>

---

3. JSX에서 클래스 적용하기

HTML에서는 class 속성을 사용하지만, JSX에서는 className을 사용해! 🔥

const element = <h1 className="title">Hello, JSX!</h1>;

---

4. JSX에서 스타일 적용하기

JSX에서 style을 적용할 때는 객체 형태로 작성해야 해!

const style = { color: "blue", fontSize: "20px" };
const element = <h1 style={style}>Styled JSX!</h1>;

속성 이름도 background-color가 아니라 **camelCase(backgroundColor)**로 작성해야 해! 📝

---

5. JSX에서 여러 요소 감싸기

JSX에서는 여러 개의 요소를 반드시 하나의 부모 요소로 감싸야 해!

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

만약 불필요한 div 태그를 만들고 싶지 않다면? 👉 Fragment 사용!

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

이렇게 하면 불필요한 <div> 없이 여러 요소를 감쌀 수 있어! ✨

---

---

🚀 JSX 문법 요약

✅ JSX는 HTML과 비슷하지만 JavaScript의 확장 문법

✅ reture문 안에 HTML형태로 작성한다.

✅ {} 안에서 JavaScript 표현식 사용 가능

✅ 여러 요소는 하나의 부모 요소로 감싸야 함 (<> </> 사용 가능)

✅ JSX는 React.createElement로 변환됨

✅ class 대신 className 사용

✅ style은 객체 형태로 작성 & camelCase 속성 사용

✅ map()을 사용해 리스트 렌더링 시 key 속성 추가 필수

✅ if 문 대신 삼항 연산자(? :)나 && 사용

---