📘 리액트 강의 2편 - JSX 문법과 컴포넌트 기초

리액트에서는 HTML을 그대로 쓰는 것이 아니라, JSX라는 특수한 문법을 사용합니다. JSX는 JavaScript와 HTML을 섞어 쓸 수 있는 문법으로, 리액트 컴포넌트의 핵심입니다. 이 강의에서는 JSX 문법의 기본 규칙과 컴포넌트의 개념, 그리고 props를 통한 데이터 전달 방법을 배웁니다.

---

1. JSX란?

JSX는 JavaScript 문법 확장으로, XML처럼 생긴 문법입니다. HTML과 매우 유사하지만 몇 가지 중요한 차이점이 있습니다:

JSX 주요 규칙

• 태그는 꼭 닫아야 한다
  → <input />, <br />
• 하나의 최상위 태그로 감싸야 한다
  → <div>...</div>
• class 대신 className 사용
• JS 표현식은 {} 중괄호로 묶기

const name = "React";

return <h1>Hello, {name}!</h1>;

---

2. 컴포넌트란?

React의 UI는 **컴포넌트(Component)**라는 단위로 구성됩니다. 컴포넌트는 하나의 독립적인 UI 블록이며, 함수처럼 만들고 return으로 JSX를 반환합니다.

기본 컴포넌트 예시

function Welcome() {
  return <h2>환영합니다!</h2>;
}

이 컴포넌트는 아래처럼 사용할 수 있습니다:

<Welcome />

---

3. Props (컴포넌트에 데이터 전달하기)

컴포넌트에 값을 전달하려면 props를 사용합니다.

예시: 사용자 카드 컴포넌트

function UserCard(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>{props.job}</p>
    </div>
  );
}

// 사용
<UserCard name="홍길동" job="개발자" />

props는 객체이며, JSX에서 중괄호로 값을 출력합니다.

---

4. 실습: 명함 카드 만들기

function BusinessCard(props) {
  return (
    <div style={{ border: "1px solid #ddd", padding: "10px", width: "200px" }}>
      <h2>{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <BusinessCard name="홍길동" email="hong@example.com" />
    </div>
  );
}