🪓 Adaption and Extending

🚩 css style안에 jsx 적용

이전 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>
	);
}

# 생략

🚩 컴포넌트 확장(extending)

스타일 컴포넌트를 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>
	);
}

# 생략