React로 HTML 요소를 확장하는 방법

회사의 디자인 시스템에 맞는 사용자 지정 HTML 요소를 만드는 데 필요한 대부분의 작업은 스타일을 지정하고 고유한 소품을 추가하는 것입니다. 따라서 Button 소품을 수신하고 ref 을 통해 DOM 액세스 권한이 있어야 하는 사용자 지정 children 을 생성해야 한다고 가정해 보겠습니다. 그렇게 할 수 있습니다.

import { forwardRef } from 'react';

type ButtonProps = {
  loading?: boolean; // custom prop
} & React.PropsWithChildren<React.ComponentPropsWithRef<'button'>>;

const Button: React.FC<ButtonProps> = forwardRef(
  ({ loading, children, ...props }, ref) => {
    return (
      <button data-loading={loading} {...props} ref={ref}>
        {children}
      </button>
    );
  }
);

export default Button;

PropsWithChildren prop 및 receive children를 제공하는 React.ComponentPropsWithRef<'button'> 일반 인터페이스를 사용하여 button 이 수신할 수 있는 모든 props를 전달합니다.

물론 ComponentPropsWithRef 에 대한 인터페이스 ComponentPropsWithoutRef 를 변경하고 구성 요소 정의에서 forwardRef 함수를 삭제할 수 있습니다(비록 권장하지는 않습니다. refs는 나중에 응용 프로그램에서 유용할 수 있습니다).

type ButtonProps = {
  loading?: boolean; // custom prop
} & React.PropsWithChildren<React.ComponentPropsWithoutRef<'button'>>;

const Button: React.FC<ButtonProps> = ({ loading, children, ...props }) => {
  return (
    <button data-loading={loading} {...props} ref={ref}>
      {children}
    </button>
  );
};

export default Button;

interface PropsWithChildren 를 삭제할 수도 있지만 그렇게 하면 children prop을 직접 구현해야 합니다.

type ButtonProps = {
  loading?: boolean; // custom prop
  children?: React.ReactNode;
} & React.ComponentPropsWithoutRef<'button'>;

const Button: React.FC<ButtonProps> = ({ loading, children, ...props }) => {
  return (
    <button data-loading={loading} {...props} ref={ref}>
      {children}
    </button>
  );
};

export default Button;

더 원해? 라이브 구현 확인StackBlitz