CSS-in-JS의 장단점은 런타임 방식과 빌드 추출 방식에 따라 어떻게 달라지나요?

이렇게 답해 보세요 (핵심 답변)

CSS-in-JS는 컴포넌트 파일 안에서 스타일을 함께 관리하고 props 기반 동적 스타일을 표현하기 편하다는 장점이 있습니다. 다만 브라우저 실행 중에 스타일을 계산해 삽입하는 런타임 방식은 직렬화 비용과 번들 크기, 서버 렌더링 순서 처리 부담이 따릅니다. 반면 빌드 시점에 정적 CSS 파일로 추출하는 방식은 런타임 비용을 크게 줄이는 대신 동적 표현에 제약이 있으므로 라이브러리의 출력 방식과 캐싱 구조를 보고 선택해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 클래스 이름을 해시로 자동 분리해 주더라도 상속이나 미디어 쿼리, 쌓임 맥락 같은 CSS 기본 동작 원리를 몰라도 되는 것은 아닙니다.
2. 런타임 CSS-in-JS에서 매 프레임 바뀌는 좌표값을 그대로 props에 넣어 새 클래스를 계속 찍어내면 스타일시트 재계산 비용이 크게 늘어납니다.

면접에서 자주 하는 실수

CSS-in-JS라는 이름만 보고 모든 라이브러리가 똑같이 무거운 브라우저 런타임 비용을 가진다고 일반화하지 않아야 합니다.