[React] React.FC vs React.ButtonHTMLAttributes - 공통컴포넌트 제작방식

두 방법은 React 컴포넌트에서 타입을 정의하는 방식에 있어 약간의 차이가 있지만, 기능적인 차이는 매우 적습니다. 다만, 두 가지 접근 방식이 제공하는 유연성과 명시성의 차이를 이해하는 것이 중요합니다.

---

1. React.FC vs React.ButtonHTMLAttributes

1.1 React.FC (Functional Component):

React.FC는 기본적으로 Functional Component를 위한 타입을 정의하는 도구입니다. **children**이 자동으로 포함되고, defaultProps 및 **propTypes**를 사용할 수 있는 장점이 있습니다. 하지만 일부 제약이 있으며, 더 명시적인 타입을 정의하려고 할 때 사용되지 않는 경우도 있습니다.

1.2 React.ButtonHTMLAttributes (HTML 속성을 확장한 방식):

React.ButtonHTMLAttributes<HTMLButtonElement>는 HTML 버튼 요소에 사용할 수 있는 모든 속성을 확장해서 컴포넌트에 추가할 때 사용됩니다. 이 방식은 특정한 HTML 요소의 속성을 확장하여 명시적으로 속성을 지정할 수 있고, React.FC보다 더 유연하게 컴포넌트의 타입을 정의할 수 있습니다.

---

2. 차이점

구분React.FC 사용React.ButtonHTMLAttributes 확장

구분	React.FC 사용	React.ButtonHTMLAttributes 확장
children 포함 여부	children이 자동으로 포함됨	children을 명시적으로 정의해야 함
HTML 속성 확장 가능성	기본적으로 HTML 속성을 확장할 수 없음 (onClick, disabled 등 명시적으로 추가해야 함)	HTML 요소의 속성(onClick, disabled 등)을 자동으로 확장 가능
유연성	컴포넌트에 children이 반드시 필요하다는 가정이 붙음	특정 HTML 요소의 속성을 쉽게 확장할 수 있고 더 유연하게 컴포넌트 타입을 정의 가능
제약	defaultProps, propTypes와 잘 통합되지만 제약이 있음	기본 HTML 속성에 대한 명시적 확장이 가능하므로 더 많은 제어를 제공
기본적인 타입 안전성	children을 기본적으로 포함해 타입 안전성을 높임	HTML 속성 타입을 자동으로 포함하여 타입 안전성을 높임

 

2.1. 예시 비교

2.1.1 React.FC 방식

interface ButtonProps {
  onClick?: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ onClick, children, disabled }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
};

• children 자동 포함: React.FC는 children을 기본적으로 포함합니다.
• 제한적인 속성 확장: 이 방식은 button의 기본 속성들(onClick, disabled 등)을 수동으로 추가해야 합니다. 예를 들어, type, aria-label 같은 속성은 수동으로 포함해야 합니다.

2.1.2. React.ButtonHTMLAttributes 확장 방식

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

const Button = ({ children, ...props }: ButtonProps) => {
  return (
    <button {...props}>
      {children}
    </button>
  );
};

• HTML 속성 자동 포함: onClick, disabled, type, aria-* 등 button 요소의 모든 속성이 자동으로 포함됩니다.
• 유연한 props 확장: 이 방식은 버튼 요소에서 사용할 수 있는 모든 속성을 포함하면서, 확장성을 제공합니다.
• children을 명시적으로 정의해야 함: children을 자동으로 포함하지 않으므로 명시적으로 정의해야 합니다.

---

3. 어떤 방식이 더 적합한가?

3.1. React.FC 방식:

• 이 방식은 간단한 Functional Component에 적합합니다. 자동으로 children을 포함하는 등의 편의성을 제공하므로, 특정 HTML 속성 확장이 필요 없는 경우나, 특별한 처리 없이 컴포넌트를 빠르게 만들고 싶을 때 유용합니다.
• 다만, children을 항상 포함하게 되는 제약이 있고, HTML 요소의 속성을 확장하려면 직접 명시해야 합니다.

3.2. React.ButtonHTMLAttributes 확장 방식:

• 이 방식은 HTML 속성을 확장해야 할 때 특히 유용합니다. 예를 들어, button, a, input 등의 HTML 요소에서 제공되는 속성들을 자동으로 사용할 수 있고, 유연하게 props를 관리할 수 있습니다.
• 더 유연한 방식이므로, 버튼처럼 기본적으로 HTML 속성을 많이 가지는 컴포넌트를 만들 때 특히 적합합니다.
• 동적 요소 렌더링에도 유용합니다. <button>, <a> 태그 등을 동적으로 렌더링하고 싶을 때도 사용할 수 있습니다.

---

4. 최종 결론

• **React.FC**는 자동으로 children을 포함하고, 간단한 컴포넌트 생성 시 편리하지만, HTML 속성 확장성은 제한적입니다.
• React.ButtonHTMLAttributes 확장 방식은 HTML 속성에 대한 유연한 처리가 가능하고, 버튼과 같은 기본 HTML 요소를 확장해야 할 때 더 적합합니다. 특히, 버튼 컴포넌트 같은 경우는 ButtonHTMLAttributes를 확장하는 것이 더 유용한 방식입니다.