4강. JSX와 컴포넌트

?1. 이번 강의에서 해결할 문제

App 하나에 모든 마크업을 넣으면 화면이 커질수록 수정 위치를 찾기 어렵습니다. 반복될 게임 카드와 페이지 헤더를 의미 있는 컴포넌트로 나눕니다.

✓2. 학습 목표

• JSX의 기본 규칙을 적용한다.
• 함수 컴포넌트를 만들고 조합한다.
• 컴포넌트의 책임 경계를 정한다.

◇3. 핵심 개념

JSX는 JavaScript 안에 마크업을 표현하는 문법입니다. 반환할 형제 요소는 하나의 부모 또는 Fragment로 감싸고, 태그는 반드시 닫습니다. HTML의 class 대신 className을 씁니다. 중괄호 안에는 JavaScript 표현식을 넣을 수 있습니다.

컴포넌트 이름은 대문자로 시작해야 React가 일반 HTML 태그와 구분합니다. 컴포넌트는 한 가지 UI 책임에 집중시키되 단순한 div 하나마다 분리하지는 않습니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/components/SiteHeader.tsx

export function SiteHeader() {
  const serviceName = 'Release Radar';

  return (
    <header>
      <p>GAME RELEASE DASHBOARD</p>
      <h1>{serviceName}</h1>
    </header>
  );
}

파일 경로: game-release-dashboard/src/components/GameCard.tsx

export function GameCard() {
  return (
    <article className="game-card">
      <p>2026년 9월 18일</p>
      <h2>Star Harbor</h2>
      <p>PC · 탐험</p>
      <button type="button">관심 게임</button>
    </article>
  );
}

파일 경로: game-release-dashboard/src/App.tsx

import { GameCard } from './components/GameCard';
import { SiteHeader } from './components/SiteHeader';

function App() {
  return (
    <>
      <SiteHeader />
      <main>
        <GameCard />
      </main>
    </>
  );
}

export default App;

→5. 코드가 동작하는 이유

<SiteHeader />를 만나면 React는 SiteHeader 함수를 실행해 반환된 JSX를 그 위치에 배치합니다. 두 컴포넌트는 export되고 App에서 import되어 모듈 경계를 넘습니다. Fragment는 불필요한 DOM 요소 없이 형제 요소를 묶습니다.

!6. 자주 하는 실수와 해결법

• 컴포넌트 이름을 소문자로 시작: React가 HTML 태그로 해석합니다. PascalCase를 사용합니다.
• 여러 최상위 요소를 그대로 반환: Fragment 또는 의미 있는 부모 요소로 감쌉니다.
• 이벤트 버튼에 type 생략: 폼 안에서 제출 버튼이 될 수 있으므로 일반 버튼은 type="button"을 명시합니다.

✎7. 직접 실습

DashboardIntro 컴포넌트를 만들어 서비스 설명과 “이번 달 출시작” 제목을 표시하고 SiteHeader와 GameCard 사이에 배치하세요.

?8. 이해 점검 질문 3개

1. JSX의 중괄호 안에는 어떤 값을 넣을 수 있나요?
2. 컴포넌트 이름이 대문자로 시작해야 하는 이유는 무엇인가요?
3. Fragment는 실제 div와 어떤 차이가 있나요?

■9. 핵심 요약

JSX는 데이터와 마크업을 함께 표현하고, 컴포넌트는 UI 책임을 이름 있는 함수로 분리합니다. 다음 강의에서는 고정된 GameCard에 외부 데이터를 전달합니다.