조금 더 간편하게 component를 꾸밀 수 있는 CSS-in-JS 방식 => styled-components를 사용 css-in-js방식으로 꾸밀 수 있게 도와주는 패키지
yarn 명령어를 이용해서 styled-components를 설치하자
yarn add styled-components
vscode-styled-components 설치
styled-components의 기본 원리는 꾸미고자하는 components를 styled components 방식대로 먼저 만들고 그 안에 style 코드를 작성하는 방식
styled importd
styled 키워드를 사용해서 components를 하나 만든다
style 코드는 우리가 알고 있는 css와 동일하다
sytled.태그이름 빽틱
조건부 스타일링을 작성할 수 있는 장점이 있다. props를 통해서 전달해주면서 조건부 스타일링
map을 이용해서 위 코드를 리팩토링
몰입