[TypeScript] DefaultProps & Styled-Components 타입지정

DefaultProps , Styled-Components의 Props넘겨주는법, Type지정해주는 법에 대해 알아보자.

초기 Props 값

DefaultBadge.defaultProps = {
  info: "날씨",
  color: "pink",
};

defaultProps 프로퍼티를 할당함으로써 props의 초기값 정의가 가능하다!
공식문서 참고

Styled Component의 props & Type정의

DefaultBadge에서 받아온 color를 Badge의 props로 넘겨주고

type BadgeType = {
  color?: string;
};

const Badge = styled.span<BadgeType>`
  padding: 5px;
  margin: 10px;
  border-radius: 3px;
  background-color: ${(props) => props.color};
`;

Badge에서 받은 colors의 Type을 BadgeType로 정의해 준 뒤(or <{ color: string }>),
${(props) => props.color};다음과 같이 사용해준다.

<DefaultBadge info={"봄"} />Component는 color값을 지정해주지 않아

defaultProps의 초기값이었던 pink색이 들어간 것을 확인할 수 있다.

전체 코드

import styled from "styled-components";

type PropsType = {
  info?: string;
};

type BadgeType = {
  color?: string;
};

function DefaultBadge({ info, color }: PropsType & BadgeType) {
  return (
    <>
      <Badge color={color}>{info}</Badge>
    </>
  );
}

DefaultBadge.defaultProps = {
  info: "날씨",
  color: "pink",
};

export default DefaultBadge;
const Badge = styled.span<BadgeType>`
  padding: 5px;
  margin: 10px;
  border-radius: 3px;
  background-color: ${(props) => props.color};
`;

import DefaultBadge from "./DefaultBadge";

export default function Index() {
  return (
    <>
      <DefaultBadge info={"봄"} />
      <DefaultBadge info={"여름"} color={"orange"} />
      <DefaultBadge info={"가을"} color={"brown"} />
      <DefaultBadge info={"겨울"} color={"skyblue"} />
    </>
  );
}