Dynamic Styling
스타일 prop은 CSS 조건으로 변환되어 컴포넌트 안에 머문다
styled-components는 JavaScript 값을 템플릿 안에서 읽어 버튼 색, 텍스트 크기, hover 규칙을 컴포넌트 단위로 묶는다.
primary
주요 버튼이면 강조 색을 선택한다.
size
텍스트 크기를 props로 받아 CSS font-size에 반영한다.
color
상황별 색을 컴포넌트 사용 지점에서 조절한다.
props 입력
의미 값 전달
primary, size, color처럼 스타일을 결정할 값을 넘긴다.
template
조건에 따라 CSS 선택
props를 읽어 배경색, 글자 크기, hover 색을 결정한다.
class 생성
스타일을 컴포넌트에 연결
동일한 규칙을 재사용하면서 값만 다르게 렌더링한다.
UI 반영
상태별 표현 완성
기본 버튼, 보조 버튼, 크기별 텍스트가 같은 패턴에서 나온다.
대상
props 역할
장점
DynamicButton
primary 여부로 강조와 보조 스타일을 나눈다.
조건부 className을 흩뿌리지 않고 버튼 안에서 처리한다.
ResizableText
size와 color로 텍스트 표현을 조절한다.
같은 컴포넌트를 여러 시각 상태로 재사용한다.
hover 규칙
기본색과 hover색을 같은 조건에서 고른다.
상호작용 상태까지 컴포넌트 스타일 안에 묶인다.
의미 있는 props
색상 코드만 넘기기보다 primary처럼 UI 의미를 표현하면 유지보수가 쉽다.
반복 제거
공통 padding, border, transition은 컴포넌트 안에 한 번만 둔다.
상태 일관성
기본, hover, 강조 상태가 서로 다른 기준으로 흩어지지 않게 한다.