React 컴포넌트에서 HTML Props 사용하기

이번 연습에서는 오랜 친구인 버튼과 함께 돌아왔습니다.

하지만 이번에는 요구 사항이 약간 다릅니다. 우리는 이 버튼이 일반 HTML 버튼처럼 동작하기를 원합니다.

onClick 및 type=”button” 과 같은 기능을 사용할 수 있어야 하며 자동 완성을 지원해야 합니다.

export const Button = ({ className, ...rest }: {}) => {
  return (
    <button {...rest} className={`default-classname ${className}`}></button>
  );
};

const Parent = () => {
  return <Button onClick={() => {}} type="button"></Button>;
};

현재 이 기능은 작동하지 않습니다. 모든 props를 …rest로 전달하고 있지만 자동 완성 기능이 없습니다.

기본 className을 전달하면서 className 을 추출하여 추가 클래스를 추가할 수 있는 이름으로 사용하는 것도 좋을 것입니다.

Challenge

여러분의 과제는 네이티브 HTML 버튼 컴포넌트에서 모든 속성 유형을 추출하는 방법을 알아낸 다음, 이를 사용하여 사용자 정의 버튼을 타입지정하는 것입니다.

이 과정은 약간 까다롭지만, React 타입 헬퍼가 도움이 될 것입니다. 물론 수동 솔루션도 있습니다.

Add HTML Props to React Components

가장 먼저 할 수 있는 일은 버튼 위로 마우스를 가져가서 타입 정의를 확인하는 것입니다.

// hovering over button
(property) JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>

그런 다음 정의를 복사하여 버튼 컴포넌트에 추가할 수 있습니다.

export const Button = ({
  className,
  ...rest
}: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>,>) => {
  ...