5강. Props로 데이터 전달 | 리액트 입문 — 컴포넌트로 만드는 웹 · 입문 — 무료 온라인 강의

📬 Props — 컴포넌트에게 편지 보내기

4강에서 만든 UserCard는 항상 같은 내용을 보여줍니다. 실제 앱에서는 카드마다 다른 사용자 정보를 보여줘야 합니다. 이때 사용하는 것이 Props(Properties)입니다. Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다. 함수의 인수(argument)와 같습니다 — 컴포넌트를 어떻게 렌더링할지 지시하는 설정값입니다.

📤 Props 전달과 수신

Props는 HTML 속성처럼 키=값 형태로 전달합니다:

// 부모: Props 전달
function App() {
  return (
    <div>
      <UserCard name="김민준" age={25} isPremium={true} />
      <UserCard name="이서연" age={30} isPremium={false} />
    </div>
  )
}

// 자식: Props 수신
function UserCard(props: { name: string; age: number; isPremium: boolean }) {
  return (
    <div className="card">
      <p>이름: {props.name}</p>
      <p>나이: {props.age}세</p>
      <p>등급: {props.isPremium ? '프리미엄' : '일반'}</p>
    </div>
  )
}

문자열은 따옴표("")로, 문자열이 아닌 값(숫자, 불리언, 객체 등)은 중괄호({})로 전달합니다.

🔓 구조 분해(Destructuring)로 간결하게

props.name, props.age처럼 매번 props.를 쓰는 것은 번거롭습니다. 구조 분해로 깔끔하게 쓸 수 있습니다:

// 매개변수에서 바로 구조 분해
function UserCard({ name, age, isPremium }: { name: string; age: number; isPremium: boolean }) {
  return (
    <div>
      <p>{name}</p>
      <p>{age}세</p>
      <p>{isPremium ? '프리미엄' : '일반'}</p>
    </div>
  )
}

📋 TypeScript로 Props 타입 지정하기

실무에서는 Props 타입을 interface나 type으로 분리해 선언합니다. 가독성이 높아지고, 재사용도 됩니다:

// Props 타입을 별도로 선언
interface UserCardProps {
  name: string
  age: number
  isPremium?: boolean  // ?는 선택적 prop
  onClick?: () => void
}

function UserCard({ name, age, isPremium = false, onClick }: UserCardProps) {
  return (
    <div onClick={onClick} className="card">
      <p>{name}</p>
      <p>{age}세</p>
      {isPremium && <span>⭐ 프리미엄</span>}
    </div>
  )
}

?가 붙은 Props는 전달하지 않아도 됩니다. 이때 기본값(isPremium = false)을 설정해두면 undefined 대신 기본값이 사용됩니다.

👶 children Props — 컴포넌트 안에 내용 담기

children은 특별한 Props입니다. 컴포넌트 태그 사이에 들어오는 내용이 자동으로 children으로 전달됩니다:

import { ReactNode } from 'react'

interface CardProps {
  title: string
  children: ReactNode  // 어떤 JSX든 받을 수 있음
}

function Card({ title, children }: CardProps) {
  return (
    <div className="border rounded-lg p-4">
      <h2 className="font-bold text-lg mb-2">{title}</h2>
      <div>{children}</div>  {/* 전달된 내용이 여기에 */}
    </div>
  )
}

// 사용: 태그 사이에 어떤 내용이든 올 수 있음
function App() {
  return (
    <Card title="공지사항">
      <p>내일 서버 점검이 있습니다.</p>
      <button>확인</button>
    </Card>
  )
}

children을 활용하면 레이아웃 컴포넌트(Card, Modal, Section 등)를 유연하게 만들 수 있습니다.

🚫 Props는 읽기 전용

Props는 읽기 전용(read-only)입니다. 자식 컴포넌트에서 전달받은 Props를 직접 수정하면 안 됩니다:

function UserCard({ name }: { name: string }) {
  // ❌ Props 직접 수정 금지!
  name = name.toUpperCase()

  // ✅ 새 변수에 담아 사용
  const displayName = name.toUpperCase()
  return <p>{displayName}</p>
}

Props를 수정하고 싶다는 느낌이 들면, 그건 state(상태)가 필요하다는 신호입니다. 다음 강의에서 배웁니다.

✅ 정리

Props는 부모에서 자식으로 데이터를 전달하는 방법입니다 — 함수 인수와 같습니다.
구조 분해로 props.x 대신 x처럼 직접 쓸 수 있습니다.
interface로 Props 타입을 선언하면 타입 안전성과 가독성이 올라갑니다.
children으로 태그 사이 내용을 자식에게 전달할 수 있습니다.
Props는 읽기 전용 — 수정이 필요하면 state를 사용합니다.

Props로 데이터 전달