728x90 300x250 SMALL specialization2 Containment + Specialization 패턴 활용법 Containment와 Specialization을 함께 활용하면, 보다 유연하고 확장 가능한 컴포넌트 설계가 가능하다.예를 들어, Containment를 사용하여 컨텐츠를 감싸는 역할을 수행하고, Specialization을 통해 해당 컨텐츠에 특수한 기능을 부여할 수 있다. 추천 예제카드(Card) 컴포넌트 + 버튼 (Containment로 컨텐츠를 포함하고, Specialization으로 다양한 카드 스타일 제공)다이얼로그(Dialog)컴포넌트 + 확인/취소 버튼(Containment로 내부 컨텐츠 포함, Specialization으로 버튼 종류 변경)레이아웃 컴포넌트 + 특정 페이지 적용(Containment로 레이아웃을 감싸고, Specialization으로 특정 페이지 디자인 차별화)예제 코드.. 2025. 2. 15. 확장 가능한 컴포넌트 만들기 : Specialization 패턴 사용법 Specialization 패턴은 일반적인 컴포넌트를 만들고, 이를 확장하여 특정 역할을 수행하는 컴포넌트를 만드는 방식이다.일반적으로 props를 활용하여 특정 동작을 추가하거나, 기본 컴포넌트를 확장하여 특화된 기능을 제공한다. 추천 예제버튼 컴포넌트(기본 버튼 vs primary 버튼 vs danger버튼)입력 폼(기본 Input vs Password Input)알림 컴포넌트(일반 알림 vs. 경고 메시지 vs. 성공 메시지)예제 코드function Button({ type, children }) { const className = type === "primary" ? "btn-primary" : "btn-default"; return {children};}function App() { ret.. 2025. 2. 14. 이전 1 다음 728x90 반응형 LIST