css-in-js란?

CSS-in-JS는 JavaScript 코드 안에서 CSS 스타일을 정의하고 사용하는 방식을 말합니다. 전통적인 방식에서는 .css 파일에 스타일을 작성하고, 클래스명을 HTML에 붙여서 사용했지만, CSS-in-JS는 스타일을 JavaScript 코드 내부에서 직접 작성해서 컴포넌트와 스타일을 더 강하게 결합할 수 있도록 도와줍니다. 대표적으로는 styled-components, emotion, vanilla-extracct등이 있습니다.

장점

• 스타일의 범위가 컴포넌트 단위로 제한되어 충돌을 방지할 수 있습니다.
• props를 이용해 동적으로 스타일 조절이 가능합니다.
• Javascript의 기능을 그대로 활용할 수 있습니다.(조건문, 함수, 변수 등)
• 서버사이드 렌더링(SSR)도 잘 지원합니다.(Next.js 등에서도 활용)

단점

• 런타임에 스타일이 적용되기 때문에 성능에 부담이 될 수 있습니다.
• 도구(DevTool)이나 정적 분석 도구의 지원이 부족할 수 있습니다.
• 프로젝트 빌드 시간이 길어질 수 있습니다.

최근에는 TailwindCSS나 vanilla-extract처럼 정적 CSS 시스템을 선호하는 경향도 커졌습니다. App Router + TailwindCSS + ShadCN 조합을 사용한다면, CSS-in-JS보다 utility-first 스타일링을 더 많이 활용할 수 있죠. 다만, ShadCN에서 사용하는 @emotion도 일종의 CSS-in-JS 방식입니다.

단점을 더욱 자세히 정리해보자

1. 런타임 스타일 생성으로 인한 성능 문제

대부분의 CSS-in-JS 라이브러리는 브라우저에서 실행될 때(즉, 런타임)에 실제 스타일 태그(<style>)를 생성해 DOM에 삽입됩니다.

특히, styled-components나 emotion처럼 런타임 기반 라이브러리는 다음 과정을 거칩니다

1. 컴포넌트가 렌더링될 때
2. 해당 컴포넌트의 스타일이 계산되고