합성 vs 상속 — React가 상속 대신 합성을 권장하는 이유

// ❌ 상속 기반 설계 (비권장)
class Button extends React.Component {
  render() {
    return <button className="btn">{this.props.children}</button>;
  }
}

class PrimaryButton extends Button {
  render() {
    return <button className="btn btn-primary">{this.props.children}</button>;
  }
}

class DangerButton extends Button {
  render() {
    return <button className="btn btn-danger">{this.props.children}</button>;
  }
}

// 문제: 아이콘이 있는 PrimaryButton이 필요하면?
// IconPrimaryButton extends PrimaryButton? → 상속 깊어짐
// Button의 내부 구현이 바뀌면 모든 자식에 영향

// 범용 컨테이너
function Card({ children, className = '' }) {
  return <div className={`card ${className}`}>{children}</div>;
}

function CardHeader({ children }) {
  return <div className="card-header">{children}</div>;
}

function CardBody({ children }) {
  return <div className="card-body">{children}</div>;
}

// 사용: 어떤 콘텐츠든 담을 수 있음
<Card>
  <CardHeader>
    <h2>프로필</h2>
  </CardHeader>
  <CardBody>
    <p>사용자 정보</p>
    <Avatar src={user.avatar} />
  </CardBody>
</Card>

// 범용 Dialog
function Dialog({ title, message, onConfirm, onCancel, variant = 'default' }) {
  return (
    <div className={`dialog dialog-${variant}`}>
      <h2>{title}</h2>
      <p>{message}</p>
      <div className="dialog-actions">
        {onCancel && <button onClick={onCancel}>취소</button>}
        <button onClick={onConfirm}>확인</button>
      </div>
    </div>
  );
}

// 특수화된 Dialog들 — 상속이 아닌 합성
function ConfirmDeleteDialog({ itemName, onConfirm, onCancel }) {
  return (
    <Dialog
      title="삭제 확인"
      message={`'${itemName}'을(를) 정말 삭제하시겠습니까?`}
      variant="danger"
      onConfirm={onConfirm}
      onCancel={onCancel}
    />
  );
}

function WelcomeDialog({ onConfirm }) {
  return (
    <Dialog
      title="환영합니다"
      message="서비스에 오신 것을 환영합니다!"
      variant="success"
      onConfirm={onConfirm}
    />
  );
}

function PageLayout({ header, sidebar, children, footer }) {
  return (
    <div className="page-layout">
      <header className="page-header">{header}</header>
      <div className="page-body">
        <aside className="page-sidebar">{sidebar}</aside>
        <main className="page-content">{children}</main>
      </div>
      <footer className="page-footer">{footer}</footer>
    </div>
  );
}

// 사용: 각 영역에 원하는 콘텐츠를 자유롭게 배치
<PageLayout
  header={<Navigation />}
  sidebar={<CategoryList />}
  footer={<Copyright />}
>
  <ArticleList />
  <Pagination />
</PageLayout>

function List({ items, renderItem, renderEmpty }) {
  if (items.length === 0) {
    return renderEmpty ? renderEmpty() : <p>항목이 없습니다</p>;
  }

  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id}>{renderItem(item, index)}</li>
      ))}
    </ul>
  );
}

// 같은 List, 다른 렌더링
<List
  items={users}
  renderItem={(user) => <UserCard user={user} />}
  renderEmpty={() => <EmptyState icon="users" message="사용자가 없습니다" />}
/>

<List
  items={products}
  renderItem={(product) => <ProductThumbnail product={product} />}
/>

function Button({
  variant = 'default',
  size = 'medium',
  icon,
  loading = false,
  disabled = false,
  children,
  ...rest
}) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled || loading}
      {...rest}
    >
      {loading && <Spinner size="small" />}
      {icon && !loading && <Icon name={icon} />}
      {children}
    </button>
  );
}

// 특수화: 자주 쓰는 조합을 미리 설정
function DeleteButton({ children = '삭제', ...props }) {
  return <Button variant="danger" icon="trash" {...props}>{children}</Button>;
}

function SubmitButton({ loading, children = '저장', ...props }) {
  return <Button variant="primary" type="submit" loading={loading} {...props}>{children}</Button>;
}

// 크로스 커팅 관심사: 로깅, 에러 바운더리, 인증 체크
// → HOC(Higher-Order Component) 또는 커스텀 훅으로 해결

function withErrorBoundary(Component) {
  return function WrappedComponent(props) {
    return (
      <ErrorBoundary>
        <Component {...props} />
      </ErrorBoundary>
    );
  };
}

// 또는 커스텀 훅
function useAuth() {
  const { user, isAuthenticated } = useContext(AuthContext);
  // ...
  return { user, isAuthenticated };
}