확장 가능한 컴포넌트 만들기 : 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 <button className={className}>{children}</button>;
}

function App() {
  return (
    <div>
      <Button type="primary">확인</Button>
      <Button>취소</Button>
    </div>
  );
}

 

Button 컴포넌트를 만들고, type을 활용하여 스타일을 다르게 적용하는 방식