레슨 2 / 9·20분

컴포넌트와 Props

컴포넌트란?

React에서 컴포넌트는 UI를 구성하는 독립적인 조각입니다. 레고 블록처럼 작은 컴포넌트를 조합하여 복잡한 화면을 만들 수 있습니다. 함수 컴포넌트는 JSX를 반환하는 JavaScript 함수이며, 이름은 반드시 대문자로 시작해야 합니다.

tsx

// 함수 컴포넌트 정의
function Button({ label }: { label: string }) {
  return (
    <button className="btn">{label}</button>
  );
}

// 컴포넌트 사용
function App() {
  return (
    <div>
      <Button label="저장" />
      <Button label="취소" />
    </div>
  );
}

Props 활용하기

Props(Properties)는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다. 함수의 매개변수처럼 동작하며, 자식 컴포넌트 안에서는 읽기 전용입니다. 구조 분해 할당(destructuring)으로 깔끔하게 받을 수 있습니다.

tsx

// Props 타입 정의
type ProfileCardProps = {
  name: string;
  role: string;
  avatarUrl?: string;  // 선택적 prop
};

// 기본값 설정과 구조 분해 할당
function ProfileCard({
  name,
  role,
  avatarUrl = '/default-avatar.png',
}: ProfileCardProps) {
  return (
    <div className="profile-card">
      <img src={avatarUrl} alt={name} />
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

// 사용 예시
function Team() {
  return (
    <div className="team">
      <ProfileCard name="김철수" role="프론트엔드 개발자" />
      <ProfileCard
        name="이영희"
        role="백엔드 개발자"
        avatarUrl="/avatars/lee.jpg"
      />
    </div>
  );
}

children Prop

children은 컴포넌트의 여는 태그와 닫는 태그 사이에 넣은 내용을 전달받는 특별한 prop입니다. 레이아웃이나 래퍼 컴포넌트를 만들 때 유용합니다.

tsx

type CardProps = {
  title: string;
  children: React.ReactNode;
};

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <div className="card-header">
        <h2>{title}</h2>
      </div>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

// 사용: 태그 사이의 내용이 children으로 전달
function App() {
  return (
    <Card title="공지사항">
      <p>이번 주 금요일에 배포가 예정되어 있습니다.</p>
      <p>관련 문서를 확인해 주세요.</p>
    </Card>
  );
}

💡

Props는 항상 부모에서 자식으로 한 방향(단방향)으로 흐릅니다. 자식이 부모의 데이터를 변경해야 할 때는 부모가 콜백 함수를 prop으로 전달하고, 자식이 그 함수를 호출하는 패턴을 사용합니다.

←React와 JSX 다음: State와 이벤트→