[typescript] 다중 타입을 사용하여 리액트 컴포넌트의 props 타입을 처리하는 방법을 알려주세요.
1. type 키워드를 사용한 방법
type ButtonProps = {
label: string;
disabled: boolean;
};
type LinkProps = {
url: string;
openInNewTab: boolean;
};
type Props = ButtonProps | LinkProps;
위의 예시에서 ButtonProps와 LinkProps는 각각 버튼과 링크 컴포넌트에 대한 props의 타입을 정의하고, Props는 이 두 타입 중 하나로 결정될 수 있는 다중 타입입니다.
2. interface를 사용한 방법
interface ButtonProps {
label: string;
disabled: boolean;
}
interface LinkProps {
url: string;
openInNewTab: boolean;
}
type Props = ButtonProps | LinkProps;
type 키워드와는 달리, interface를 사용하면 extends나 implements를 사용하여 다른 인터페이스를 상속받을 수 있습니다.
이러한 방식으로, 리액트 컴포넌트의 다양한 props를 처리할 수 있고, 타입스크립트의 강력한 타입 시스템을 활용하여 코드의 안정성을 높일 수 있습니다.
더 많은 정보는 타입스크립트 공식 문서를 참고하시기 바랍니다.