선택할 만한 경우
컴포넌트 응집도
스타일과 로직을 같은 파일에서 읽고 수정해야 하는 디자인 시스템 컴포넌트에 유리합니다.
먼저 확인할 비용
런타임 작업
스타일 생성과 className 계산이 필요하므로, 정적인 화면에서는 CSS 모듈보다 부담이 클 수 있습니다.
SSR 설정
FOUC를 피하려면 Registry, style 삽입, hydrate 순서가 맞는지 실제 HTML 응답에서 확인해야 합니다.
컴포넌트와 스타일을 강하게 묶을수록 표현력은 좋아지지만, App Router 환경에서는 클라이언트 경계와 서버 스타일 주입까지 설계해야 합니다.
버튼 상태, variant, 테마처럼 값에 따라 스타일이 자주 달라지는 컴포넌트에 잘 맞습니다.
스타일과 로직을 같은 파일에서 읽고 수정해야 하는 디자인 시스템 컴포넌트에 유리합니다.
스타일 생성과 className 계산이 필요하므로, 정적인 화면에서는 CSS 모듈보다 부담이 클 수 있습니다.
FOUC를 피하려면 Registry, style 삽입, hydrate 순서가 맞는지 실제 HTML 응답에서 확인해야 합니다.
맞다면 CSS-in-JS의 장점이 큽니다.
아니라면 깜빡임과 순서 문제가 납니다.
단순 화면은 런타임 없는 방식이 편합니다.