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 사용 시 어떤 값들이 넘어오는지 알 수 있기 때문에 코드를 작성할 때 실수를 줄일 수 있습니다.

Optional Type

만일 타입 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 일 때만 다음 값을 반환한다는 사실을 알고 있는게 중요하다.