상태가 다르면 props
같은 버튼의 크기·강조·비활성처럼 값에 따라 스타일만 분기한다.
바꾸려는 대상에 따라 props·as·확장을 나눈다
기본 스타일을 먼저 고정하고, 상태·HTML 의미·컴포넌트 계보 중 무엇이 달라지는지에 맞춰 한 축만 선택한다.
공통 출발점
const Button = styled.button`…`
태그 의미가 다르면 as
모양은 유지하되 링크 등 실제 HTML 역할과 필수 속성을 맞춘다.
새 계보면 styled(Base)
공통 상호작용을 물려받고 반복해서 쓸 새 컴포넌트를 만든다.
판단 기준: 한 컴포넌트에 세 축을 모두 쌓기보다, 공개 props와 시맨틱 역할이 읽히도록 변형 책임을 분리한다.