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"} />
</>
);
}
'Front-end > TypeScript' 카테고리의 다른 글
[TypeScript] Literal type, keyof, typeof (0) | 2022.08.12 |
---|---|
[TypeScript] 유틸리티 타입(제네릭 타입) (0) | 2022.08.11 |
[TypeScript] null, undefined 체크 연산자 (1) | 2022.03.25 |