이전 Sytled Commponent 블로그 글 마지막에서 BoxOne, BoxTwo의 스타일 컴포넌트 부분을 구현부분을 명료하게 구분하긴 했지만 스타일 컴포넌트로 정의한 부분은 사실 중복된 부분이 있습니다.
이를 해결하기 위해서 여러 방법중 상속을 사용하면 해결 할 수 있습니다.
즉, styled component에서 props를 통해 매개변수로 받아 처리!
# 생략
const Father = styled.div`
display: flex;
`
const Box = styled.div`
backgroundColr: ${(props) => props.bgColor};
width:100;
height:100;
`
function App(){
return (
<Father>
<Box bgColor='teal' />
<Box bgColor='tomato' />
</Father>
);
}
# 생략
스타일 컴포넌트를 OOP의 부모와 자식 클래스처럼 상속 개념을 통해서도 리팩토링 할 수 있습니다.
핵심은 styled()
메서드를 이용하여 부모 컴포넌트를 받아서 정의하고 추가로 적용하고 싶거나 기존 내용을 변경하고 싶은 것들을 정의하면 됩니다.
# 생략
const Father = styled.div`
display: flex;
`
const Box = styled.div`
backgroundColr: ${(props) => props.bgColor};
width:100;
height:100;
`
const Circle = styled.div.styled(Box)`
border-radius: 50px;
`;
function App(){
return (
<Father>
<Box bgColor='teal' />
<Circle bgColor='tomato' />
</Father>
);
}
# 생략