Styled-components 선택 기준
컴포넌트 단위 스코프, props 기반 분기, 테마 확장이 필요하면 CSS-in-JS가 유리합니다. 정적 레이아웃 중심이면 CSS 모듈이 더 단순할 수 있습니다.
충돌 감소
고유 클래스가 생성되어 컴포넌트 밖 스타일과 섞일 가능성을 줄입니다.
동적 분기
active, disabled, theme 같은 값으로 색상과 크기를 자연스럽게 바꿉니다.
런타임 비용
정적 화면만 많다면 스타일 생성 비용과 라이브러리 의존성이 과할 수 있습니다.
핵심rule 스타일 도구는 멋보다 변경 경로를 기준으로 고릅니다. 상태와 테마가 컴포넌트 안에서 자주 바뀌면 styled-components, 정적 구조가 많으면 CSS 모듈이 읽기 쉽습니다.