styled components - Pseudo Selectors

오늘의 한마디

컴포넌트 선택하기

일반 엘리먼트 선택하기

styled components는 sass처럼 엘리먼트를 선택 할 수 있다.
예를 들어 Box라는 styled components로 만든 컴포넌트안에 span이 있다면?
어떻게 선택할까

const Box = styled.div`
	width: 200px;
	height 200px;
	background-color: red;
	
	span{
		font-size: 16px;
	}
`

이런식으로 선택가능하다!! 하지만 Box컴포넌트 안에 또다른 styled components로 만들어진 컴포넌트는 어떻게 불러올까?

const TextBox = styled.span`
	display: block;
	width: 100%;
	text-align: center;
`

const Box = styled.div`
	width: 200px;
	height 200px;
	background-color: red;
	
	${TextBox}{
		font-size: 16px;
	}
`

어디서 많이 본것 같지않은가?
그렇다 javascript ES6 문법의 템플릿 리터럴과 같은 방식이다 백틱안에
계속 css를 불러오고 있었는데 템플릿 리터럴에서 함수값을 불러올때는?
${}기호를 사용하여 불러왔던것!!

어쨋든 또하나 배웠다...

항상 무엇이든 배우고 나중에 프로젝트에 써먹을 생각에 벌써 행복하다.
또한, 프로젝트 하면서 느낀건... 공부를 많이하면 할수록 더욱더 효율적으로 코드를 확장성 있게 짯을텐데... 하고 생각한다.