[React] Typescript - Optional Props

지난 포스팅에서 Circle 컴포넌트의 props로 bgColor를 전달하지 않으면 오류가 뜹니다. bgColor가 required이기 때문입니다. 이번에는 props를 선택적이도록 만들어보겠습니다.

 

- Cicle.tsx

import styled from "styled-components"

// Typescript에게 Container가 bgColor를 받을거라고 얘기해줌

interface ContainerProps {

    bgColor:string;

}

const Container = styled.div<ContainerProps>`

    width: 200px;

    height: 200px;

    border-radius: 100px;

    background-color: ${props=>props.bgColor};

`;

interface CicleProps {

    bgColor : string;

    borderColor : string;

}

function Circle({bgColor}:CicleProps) {

    return <Container bgColor={bgColor} />

}

export default Circle;

interface PlayerShape {

    name:string;

    age:number;

}

#지난시간에 작성한 Cicle.tsx에 CicleProps에 borderColor를 추가했습니다.

- App.tsx

#Circle 컴포넌트에 아래와 같은 에러가 발생합니다. required인 borderColor를 전달하지 않아서입니다. borderColor를 전달하면 에러가 사라집니다.

 

- borderColor optional props로 만들기

borderColor를 optional props로 만들어서 선택적으로 사용할 수 있도록 해주겠습니다. interface에서 borderColor 뒤에 ?만 추가하면 됩니다. 그러면 borderColor는 string 혹은 undefined의 type을 가지게 된다고 타입스크립트가 알게됩니다. 이렇게 하면 App.tsx에서 error가 사라집니다.

아직도 Typescript가 error를 보내고 있습니다. Container에도 borderColor를 설정하겠습니다.

- 타입스크립트에게 Container 컴포넌트가 borderColor를 가진다고 알려주기 

interface ContainerProps {

    bgColor:string;

    borderColor:string;

}

- 최종 Circle.tsx

import styled from "styled-components"

// Typescript에게 Container가 bgColor를 받을거라고 얘기해줌

interface ContainerProps {

    bgColor:string;

    borderColor:string;

}

const Container = styled.div<ContainerProps>`

    width: 200px;

    height: 200px;

    border-radius: 100px;

    background-color: ${props=>props.bgColor};

    border : 1px solid ${props=>props.borderColor};

`;

interface CicleProps {

    bgColor : string;

    borderColor? : string;

}

function Circle({bgColor, borderColor}:CicleProps) {

    return <Container bgColor={bgColor} borderColor={borderColor} />

}

export default Circle;

- App.tsx

import Circle from "./Circle";

function App() {

  return (

    <div >

      <Circle bgColor="teal" borderColor="white"></Circle>

      <Circle bgColor="tomato"></Circle>

    </div>

  );

}

export default App;

-> 타입스크립트가 Container  styled 컴포넌트가 borderColor를 갖는 거 알게되어서 borderColor props에는 에러가 사라졌지만 CircleProps에서는 borderColor가 optional(string 혹은 undefined)하고 ContainerProps에서는 boderColor가 필수라는 것을 타입스크립트가 알고 있어서 에러를 알려주고 있습니다.

- error 없애는 방법

function Circle({bgColor, borderColor}:CicleProps) {

    return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor}

-> 타입스크립트에게 borderColor의 default값을 정해줘야합니다. borderColor값이 만약 undefined라면 borderColor는 bgColor를 사용하겠다고 타입스크립트에게 알려주고 있습니다.

- 결과

 + default값을 argument에서 설정하기 by javascript

- Circle.tsx

import styled from "styled-components"

// Typescript에게 Container가 bgColor를 받을거라고 얘기해줌

interface ContainerProps {

    bgColor:string;

    borderColor:string;

}

const Container = styled.div<ContainerProps>`

    width: 200px;

    height: 200px;

    border-radius: 100px;

    background-color: ${props=>props.bgColor};

    border : 1px solid ${props=>props.borderColor}

`;

interface CicleProps {

    bgColor : string;

    borderColor? : string;

    text?: string;

}

function Circle({bgColor, borderColor, text ="default text"}:CicleProps) {

    return (

    <Container bgColor={bgColor} borderColor={borderColor ?? bgColor} >

        {text}

    </Container>);

}

export default Circle;

- App.tsx

import Circle from "./Circle";

function App() {

  return (

    <div >

      <Circle bgColor="teal" borderColor="yellow"></Circle>

      <Circle bgColor="tomato" text="i'm here"></Circle>

    </div>

  );

}

export default App;

- 결과

 

다음 포스팅부터는 react에서 어떻게 타입스크립트와 state를 이용하는지 배워보겠습니다.