interface CircleProps {
bgColor: string; // default props
borderColor?: string; // optional props (? == (string | undefined))
}
function Circle({bgColor, borderColor}: CircleProps) {
return (
<Container bgColor={bgColor} borderColor={borderColor ?? bgColor}></Container>
);
}
TypeScript 의 자식 컴포넌트에서 부모의 props를 가져오기 위해서 props의 타입을 지정해 주어야 해당 컴포넌트에서 props 사용이 가능합니다.
만일 부모 컴포넌트에서 넘겨주는 props가 수십 가지 이상이라면 어떤 값이 넘어오고 있는지, 타입이 무엇인지 쉽게 파악할 수 없을 것입니다.
그렇기 때문에 CircleProps
처럼 type
이나 interface
로 타입을 생성하여 지정해 주기만 한다면 prop 사용 시 어떤 값들이 넘어오는지 알 수 있기 때문에 코드를 작성할 때 실수를 줄일 수 있습니다.
만일 타입 property중에 optional property 가 존재한다면 두 가지 타입을 가지고 있음을 기억해야 합니다. → type | undefined
방법1: ??
<Container bgColor={bgColor} borderColor={borderColor ?? bgColor}></Container>
borderColor 가 undefined | null 이면 bgColor를 반환한다.
방법2: ||
<Container bgColor={bgColor} borderColor={borderColor || bgColor}></Container>
borderColor 가 undefined | null | false | ‘’ | 0 .. 등 많은 false 의 의미를 가진다면 bgColor를 반환한다.
두 방벙 중에서 선택하여 사용하면 되지만 ??(nullish coalescing) 은 undefined 와 null 일 때만 다음 값을 반환한다는 사실을 알고 있는게 중요하다.