[React][TypeScript] optional props를 적용해보자 (feat. ?)

저번 포스팅에서는
https://minf.tistory.com/135

[React][TypeScript] type Props 적용해보기 (with interface, required props)

required Props를 적용해보았는데 필수적이지 않고 optional 인 props를 적용해보면 어떨까?

import styled from "styled-components"

interface ContainerProps {
    bgColor: string;
    borderColor: string;
}

const Container = styled.div<ContainerProps>`
    width: 200px;
    height: 200px;
    background-color: ${props => props.bgColor};
    border-radius: 100px;
    border: 5px solid ${(props)=> props.borderColor};
`;

interface CircleProps {
    bgColor: string;
    borderColor?: string;
}


function Circle({ bgColor,borderColor }: CircleProps) {
    return <Container bgColor={bgColor}  borderColor={borderColor ?? "red"}/>
}

export default Circle;

방법은 간단하다 interface부분에 '?'를 붙여주면 된다. 

위 코드에서 보면 circleProps에서는 borderColor를 optional로 하고 있지만 ContainerProps에서는 required로 하고있다.

여기에서 만약 circleProps의 optional값인 borderColor가 undefined라면 '??' 를 붙여서 대응을 하면 된다.

 

다음 포스팅에서는 TypeScript와 state를 어떻게 이용하는지 알아보자