Containment + Specialization 패턴 활용법

Containment와 Specialization을 함께 활용하면, 보다 유연하고 확장 가능한 컴포넌트 설계가 가능하다.

예를 들어, Containment를 사용하여 컨텐츠를 감싸는 역할을 수행하고, Specialization을 통해 해당 컨텐츠에 특수한 기능을 부여할 수 있다.

 

추천 예제

• 카드(Card) 컴포넌트 + 버튼 (Containment로 컨텐츠를 포함하고, Specialization으로 다양한 카드 스타일 제공)
• 다이얼로그(Dialog)컴포넌트 + 확인/취소 버튼(Containment로 내부 컨텐츠 포함, Specialization으로 버튼 종류 변경)
• 레이아웃 컴포넌트 + 특정 페이지 적용(Containment로 레이아웃을 감싸고, Specialization으로 특정 페이지 디자인 차별화)

예제 코드

function Card({ children, type }) {
  const className = type === "warning" ? "card-warning" : "card-default";
  return <div className={className}>{children}</div>;
}

function App() {
  return (
    <Card type="warning">
      <h3>경고</h3>
      <p>이 작업을 실행하면 되돌릴 수 없습니다.</p>
      <button>확인</button>
    </Card>
  );
}