Slot Composition (Card.Header / Body / Footer)

#35ReactMedium

Slot Composition (Card.Header / Body / Footer)

슬롯 컴포지션 패턴

<Card> 컴포넌트를 슬롯 컴포지션 방식으로 구현하세요. 자식이 어떤 순서로 들어오든 항상 Header → Body → Footer 순서로 렌더되어야 하며, 누락된 슬롯은 아무것도 렌더하지 않습니다.

사용 예시

<Card>
  <Card.Footer>F</Card.Footer>
  <Card.Header>H</Card.Header>
  <Card.Body>B</Card.Body>
</Card>
// 화면 순서: H, B, F

구현 힌트

React.Children.toArray(children)로 자식 배열 추출
각 자식의 type을 Card.Header/Card.Body/Card.Footer와 직접 비교하여 슬롯 분류
슬롯이 없는 영역은 null 반환

학습 포인트

Component.SubComponent 형태의 슬롯 API 디자인
자식 타입 검사로 정렬 강제 (소스 순서와 독립적)
옵셔널 슬롯 처리

import React from 'react';

type SlotProps = { children?: React.ReactNode };

function Header({ children }: SlotProps) {
  return <div data-testid="header">{children}</div>;
}

function Body({ children }: SlotProps) {
  return <div data-testid="body">{children}</div>;
}

function Footer({ children }: SlotProps) {
  return <div data-testid="footer">{children}</div>;
}

export function Card({ children }: { children?: React.ReactNode }) {
  // TODO: React.Children.toArray로 children을 배열로 만들고,
  //   각 element의 type을 Card.Header / Card.Body / Card.Footer와 비교하여
  //   header, body, footer 변수에 슬롯을 담으세요.
  // TODO: 항상 Header -> Body -> Footer 순서로 렌더하고
  //   누락된 슬롯은 렌더하지 않습니다.
  return (
    <section data-testid="card">
      {/* TODO: header / body / footer 슬롯을 순서대로 렌더 */}
    </section>
  );
}

Card.Header = Header;
Card.Body = Body;
Card.Footer = Footer;

Open Sandbox

Sandpack 로드 중…

import React from 'react';

type SlotProps = { children?: React.ReactNode };

function Header({ children }: SlotProps) {
  return <div data-testid="header">{children}</div>;
}

function Body({ children }: SlotProps) {
  return <div data-testid="body">{children}</div>;
}

function Footer({ children }: SlotProps) {
  return <div data-testid="footer">{children}</div>;
}

export function Card({ children }: { children?: React.ReactNode }) {
  // TODO: React.Children.toArray로 children을 배열로 만들고,
  //   각 element의 type을 Card.Header / Card.Body / Card.Footer와 비교하여
  //   header, body, footer 변수에 슬롯을 담으세요.
  // TODO: 항상 Header -> Body -> Footer 순서로 렌더하고
  //   누락된 슬롯은 렌더하지 않습니다.
  return (
    <section data-testid="card">
      {/* TODO: header / body / footer 슬롯을 순서대로 렌더 */}
    </section>
  );
}

Card.Header = Header;
Card.Body = Body;
Card.Footer = Footer;

Open Sandbox