Styled-components

CSS 문법과 JavaScript 조건이 한 컴포넌트에서 만난다

`styled.button`은 템플릿 리터럴 안의 CSS를 기반으로 스타일링된 컴포넌트를 만들고, 렌더링 시 전달된 props를 읽어 색상이나 크기 같은 값을 분기한다.

선언에서 렌더링까지

1

styled 태그로 컴포넌트 생성

`styled.button` 뒤의 백틱 안에는 일반 CSS와 `&:hover` 같은 가상 클래스가 함께 들어간다.

const DynamicButton = styled.button` background-color: ${props => props.primary ? '#007bff' : '#6c757d'}; `
2

props가 스타일 계산에 참여

`<DynamicButton primary>`는 primary 분기를 타고, prop이 없으면 보조 버튼 색상으로 렌더링된다.

3

브라우저에는 sc-* 클래스가 남음

개발자 도구에서는 Styled-components가 만든 고유 클래스 이름을 확인할 수 있다.