styled-components를 설치한 뒤 styled.button, styled.div 같은 형태로 스타일 컴포넌트를 만듭니다.
css in js
styled-components 스타일 경계
CSS-in-JS 방식은 스타일 정의를 컴포넌트 파일 가까이에 두고 props 변화가 className이나 CSS 규칙으로 바뀌는 경로를 코드에 묶습니다.
템플릿 리터럴 안에 CSS를 작성하고 만든 컴포넌트를 JSX에서 일반 컴포넌트처럼 씁니다.
props를 읽어 active, size, variant 같은 시각 차이를 조건부로 적용합니다.
스타일 컴포넌트 이름이 화면 역할을 설명하는지 본다.
스타일 전용 props가 DOM 속성으로 새지 않는지 확인한다.
as prop으로 태그만 바꿔도 의미와 접근성이 맞는지 본다.
반복 색상과 간격은 테마나 공통 값으로 정리한다.