라이브러리를 추가한 뒤 styled 함수를 사용해 스타일이 붙은 요소를 선언합니다.
css in js
styled-components API 스타일
CSS-in-JS 방식은 시각 규칙을 컴포넌트 단위로 묶고 props 값을 이용해 상태별 스타일을 같은 위치에서 읽게 합니다.
styled.button처럼 HTML 태그를 기준으로 스타일 컴포넌트를 만듭니다.
primary 같은 prop을 받아 색상, 간격, 표시 방식을 조건부로 바꿉니다.
시각은 유지하고 실제 태그만 바꿔야 하는지 본다.
기존 스타일 컴포넌트를 확장해 중복을 줄인다.
색상 체계가 반복되면 ThemeProvider 도입을 고려한다.
스타일과 컴포넌트 책임이 과하게 결합되지 않았는지 본다.