Styled Components
기본 스타일 하나에서 상태·의미·재사용 변형을 나눈다
Styled-components의 핵심은 CSS를 컴포넌트 계약으로 만드는 데 있습니다. `styled.button`으로 기본 모양을 만들고, `props`, `as`, `styled(Base)`로 변형 책임을 분리하면 코드가 덜 흩어집니다.
시작
styled.button으로 기본 간격, 색, 반응 상태를
정의
변형
상태는 props, 의미는 as, 반복 스타일은 확장으로 분리
주의
props 이름과 테마 토큰이 컴포넌트의 공개 계약이 됨
기본 컴포넌트
base
const Button = styled.button`...`
기본 태그, 공통 간격, hover, active 같은 반복 스타일을 먼저 고정합니다.
세 가지 변형 축
P
props로 상태 분기
`primary`, `size`, `danger`처럼 화면 상태나 의도를 값으로 전달해 스타일을 바꿉니다.
state
primary ? blue : gray
A
as로 태그 의미 변경
같은 스타일을 유지하면서 실제 HTML 태그를 `button`, `a`, `div` 중 필요한 의미로 바꿉니다.
semantic
<Button as="a" href="#">
E
styled(Base)로 확장
기본 버튼의 간격과 상호작용은 공유하고 색상, 테두리, 강조 정도만 덧붙입니다.
reuse
const Danger = styled(Button)`...`
언제 어떤 변형을 쓰는가
방식
바꾸는 것
좋은 상황
위험
props
색, 크기, 강조, 비활성 상태
같은 컴포넌트의 시각 상태가 자주 바뀔 때
props가 늘면 조건식이 복잡해짐
as
렌더링되는 실제 HTML 태그
버튼 스타일의 링크처럼 시각과 의미가 다를 때
접근성 역할과 속성을 놓치기 쉬움
extend
기본 스타일 위에 추가 규칙
Primary, Danger처럼 같은 계열 변형이 많을 때
상속 단계가 깊어지면 원본 추적이 어려움
팀에서 먼저 정할 규칙
01
스타일 props 이름
`primary`, `$variant`, `$size`처럼 DOM에 흘러가지 않을 이름을
정합니다.
02
의미 태그 기준
클릭 동작은 button, 이동은 a처럼 `as`를 쓸 때의 의미 기준을
둡니다.
03
확장 깊이 제한
기본 컴포넌트 하나에서 한 단계 정도만 확장해 스타일 출처를 보이게
합니다.