Typescript (3) Props 사용하기

Typescript (2)에서 봤다시피 props를 component로 잘 갖고 온 후 이제 props를 쓰는 방법에 대해 알아보자

 

예)

import styled from "styled-components";

const Wrapper = styled.div``;

interface bgColorProps {
  bgColor: string;
}

function Square({ bgColor }: bgColorProps)  {
  return <Wrapper bgColor={bgColor} />;
}

export default Square;

 

우선 Wrapper의 bgColor props를 만들고 거기 안에 square component가 받은 bgColor props로 색깔을 지정해 준다 하지만 이렇게 하면 또 에러가 발생하는데 바로 Wrapper에서 bgColor props에 대해 설명을 안 해줬기 때문이다 그래서 다시 interface를 만들어 prop types를 설명해 줘야 된다 

 

예)

import styled from "styled-components";

interface WrapperProps {
  bgColor: string;
}

const Wrapper = styled.div<WrapperProps>`
  background-color: ${(props) => props.bgColor};
`;

interface bgColorProps {
  bgColor: string;
}

function Square({ bgColor }: bgColorProps) {
  return <Wrapper bgColor={bgColor} />;
}

export default Square;

이렇게 WrapperProps interface를 다시 만들고 bgColor types를 설명후에 <WrapperProps>로 Wrapper에게 types를 설명해 주었다

이후 내가 bgColor props를 wrapper안에서 사용하고 싶다면 코드블록 안에서와 동일한 방법으로 bgColor을 불러와 Background color로 쓴 걸 볼 수 있다