Prop이 존재하고 정의되었는지 확인

Props는 타입스크립트와 함께 React를 사용할 때 매일 사용하기 때문에 이해해야 하는 가장 중요한 것 중 하나입니다.

export const Button = (props: unknown) => {
  return <button className={props.className}></button>;
  // error under `props.className`
};

props.className 에서 className에 액세스하려고 할 때 오류가 발생합니다. 문제는 Button 컴포넌트가 항상 className을 기대한다는 것입니다.

const Parent = () => {
  return (
    <>
      {/* @ts-expect-error */}
      <Button></Button>
      // currently no error

      <Button className="my-class"></Button>
      // error under `className`      
    </>
  );
};

여러분의 과제는 className이 props 중 하나가 되도록 하고, 항상 정의되어 있는지 확인하는 것입니다.

Four Approaches to Typing Props

이 문제를 해결하는 방법에는 크게 네가지가 있습니다.

Use an Interface to Type Props

인터페이스를 사용하면 기본적으로 props가 이 인터페이스에 해당한다고 말할 수 있습니다.

interface Props {
  className: string;
}

export const Button = (props: Props) => {
  return <button className={props.className}></button>;
};

Use a Type

props인 객체는 type 또는 interface 를 통해 표현할 수 있습니다. 어떤 것을 선택하든 상관없습니다.