5강. Props로 데이터 전달하기

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

현재 GameCard는 Star Harbor만 보여 줍니다. 카드 코드를 복사하지 않고 서로 다른 게임 정보를 표시해야 합니다.

✓2. 학습 목표

• 부모에서 자식으로 props를 전달한다.
• 구조 분해 할당으로 props를 읽는다.
• props를 변경하지 않는 단방향 데이터 흐름을 지킨다.

◇3. 핵심 개념

props는 부모 컴포넌트가 자식에게 전달하는 읽기 전용 입력값입니다. 같은 컴포넌트에 다른 props를 주면 같은 구조로 다른 데이터를 표시할 수 있습니다. 데이터는 부모에서 자식으로 흐르며 자식이 props 자체를 바꾸지는 않습니다.

아직 TypeScript 문법을 본격적으로 배우기 전이므로 간단한 객체 타입만 사용합니다. 14~16강에서 타입을 체계적으로 정리합니다.

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

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

type GameCardProps = {
  title: string;
  releaseDate: string;
  platform: string;
};

export function GameCard({
  title,
  releaseDate,
  platform,
}: GameCardProps) {
  return (
    <article className="game-card">
      <p>{releaseDate}</p>
      <h2>{title}</h2>
      <p>{platform}</p>
      <button type="button">관심 게임</button>
    </article>
  );
}

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

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

function App() {
  return (
    <main>
      <h1>출시 예정 게임</h1>
      <GameCard
        title="Star Harbor"
        releaseDate="2026-09-18"
        platform="PC"
      />
      <GameCard
        title="Tiny Forge"
        releaseDate="2026-10-02"
        platform="PC · Console"
      />
    </main>
  );
}

export default App;

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

JSX 속성으로 전달한 값이 하나의 props 객체가 됩니다. GameCard의 매개변수에서 필요한 속성을 구조 분해하고 JSX 중괄호로 출력합니다. 타입은 title, releaseDate, platform이 모두 문자열이어야 한다는 계약을 빌드 전에 검사합니다.

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

• 문자열이 아닌 값을 따옴표로 전달: 숫자나 객체는 score={92}처럼 중괄호를 사용합니다.
• 자식에서 props를 재할당: 변경이 필요하면 부모의 state와 변경 함수를 전달합니다.
• 필수 prop 누락: 편집기의 타입 오류를 읽고 컴포넌트 계약에 맞는 값을 모두 넘깁니다.

✎7. 직접 실습

GameCard에 genre 문자열 prop을 추가하고 서로 다른 장르의 카드 세 개를 렌더링하세요. 기존 구조를 복사하지 말고 GameCard 호출만 늘리세요.

?8. 이해 점검 질문 3개

1. props가 읽기 전용이어야 하는 이유는 무엇인가요?
2. 같은 GameCard가 서로 다른 내용을 표시할 수 있는 이유는 무엇인가요?
3. 문자열과 숫자 prop을 JSX에서 전달하는 문법은 어떻게 다른가요?

■9. 핵심 요약

props는 컴포넌트의 입력 계약입니다. 카드 구조를 한 곳에 두고 데이터만 바꾸어 재사용할 수 있게 되었습니다.