Styled-Components 와 TailwindCSS의 차이점

sujin·2025년 2월 7일

최근 제로 런타임 css라는 개념에 대해서 알게되었는데요. 사실 개념은 알고 있었지만 용어를 몰랐던거였습니다ㅎㅎ css-in-js와 비교해서 알아두면 좋을 것 같아 정리해보려고 합니다!!

1️⃣ CSS-in-JS

CSS-in-JS는 자바스크립트 코드내에서 CSS를 작성하고, 이를 런타임에 동적으로 생성하여 DOM에 삽입하는 방식을 말합니다. 대표적인 라이브러리로는 styled-components와 Emotion 이 있습니다.

랜더링 과정

CSS-in-JS의 경우 브라우저 랜더링 과정을 간략히 나타내면 다음과 같습니다.

1. HTML 파싱 및 DOM 생성
브라우저는 HTML을 파싱하고 DOM을 생성합니다.
2. JS 실행
자바스크립트가 실행되면서 CSS-in-JS 라이브러리가 스타일을 동적으로 생성합니다.
3. CSS 파싱 및 CSSOM 생성
자바스크립트가 실행되면서 CSS 코드가 DOM에 삽입되고, 브라우저는 이를 파싱하여 CSSOM을 생성합니다.
4. 랜더 트리 생성
CSSOM과 DOM을 결합한 렌더 트리를 생성하고, 화면에 콘테츠가 렌더링 됩니다.

Styled-Components

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

function App() {
  return <Button primary={true}>Click me</Button>;
}

동적 스타일링 지원
자바스크립트의 로직을 활용하여 동적으로 스타일을 계산할 수 있습니다.
컴포넌트 기반
스타일을 컴포넌트와 함께 관리할 수 있어 코드가 더 모듈화되고 관리하기 쉬워집니다.
자동 고유 클래스 이름 생성
Styled-components는 각 스타일을 컴포넌트와 연결하고, 이를 고유한 클래스 이름으로 변환하여, 다른 컴포넌트와 스타일 충돌을 방지합니다.

문제점

CSS-in-JS를 SSR 환경에서 사용한다면, 스타일이 초기 렌더링에 누락되는 문제가 발생할 수 있습니다.

SSR 환경에서는 서버에서 HTML을 미리 렌더링해서 클라이언트로 전달하는데요. CSS-in-JS방식에서는 스타일이 JS코드에서 동적으로 생성되기 때문에, 서버 측에서 스타일을 미리 계산해서 HTML에 삽입하지 않으면, 클라이언트에서 JS가 실행되기 전까지 스타일이 적용되지 않습니다.

이로 인해, 클라이언트에서 HTML을 로드한 후, JS가 실행될 때까지 스타일이 적용되지 않은 HTML 페이지가 나타날 수 있습니다.

해결 방법이 궁금하다면 블로그🔽 를 참고해주세요
[Next.js] CSS in JS 사용시 HTML렌더링 시 스타일이 적용되지 않는 문제

2️⃣ 제로 런타임 CSS

제로 런타임 CSS는 스타일을 미리 빌드 타임에 생성하여, 런타임에 자바스크립트가 실행되기 전에 스타일이 완전히 준비된 상태로 제공되는 방식입니다. 대표적으로 Sass, CSS Modules, Vanilla Extract, TailwindCSS 제로 런타임 CSS에 해당합니다.

랜더링 과정

제로 런타임 CSS의 경우 브라우저 랜더링 과정을 간략히 나타내면 다음과 같습니다.

1. HTML 파싱 및 DOM 생성
브라우저는 HTML을 파싱하고 DOM을 생성합니다.
2. CSS 파일 로드 및 CSSOM 생성
빌드 타임에 컴파일된 CSS 파일을 브라우저가 로드하고, 이를 바탕으로 CSSOM을 생성합니다.
3. 렌더 트리 생성
DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다.
4. 레이아웃 계산 및 페인팅
렌더 트리를 바탕으로 레이아웃을 계산하고, 각 요소를 화면에 그립니다.

Tailwind CSS

// TailwindCSS 사용 예시 

<button className="bg-blue-500 text-white p-[10px] rounded-[5px]">
  Click me
</button>

빌드 타임 스타일 생성
CSS를 빌드 타임에 미리 생성하여, 런타임에서 추가적인 스타일 계산이 필요하지 않습니다.(JS 실행 없이도 브라우저가 CSS를 바로 적용 가능)
유틸리티 클래스 기반 스타일링
미리 정의된 유틸리티 클래스를 조합하여 스타일을 적용할 수 있어 빠른 개발이 가능합니다.
최적화된 번들 크기
사용하지 않는 CSS를 빌드 타임에 제거하기 때문에 최종 CSS크기를 최소화할 수 있습니다.(렌더링 성능 최적화)

문제점

동적 스타일링 관리하기가 어렵고, 조건이나 스타일이 복잡해지면 코드가 점점 길어져 가독성에도 불편함을 줄 수 있습니다.

(실제 사용 코드 예시🔽)

3️⃣ 결론

CSS-in-JS와 제로 런타임 CSS의 차이점 정리

특징	CSS-in-JS	제로 런타임 CSS
스타일 준비 시점	런타임에 자바스크립트 실행 시 동적으로 스타일 생성	빌드타임에 스타일을 미리 계산하고 정적 CSS로 제공
성능	초기 렌더링 시 스타일 적용이 늦어질 수 있으며, 런타임에 스타일 계산이 필요	빠른 초기 렌더링으로 스타일이 즉시 적용됨
유연성	자바스크립트 변수나 로직을 사용한 동적 스타일링 가능	동적 스타일링에 제한이 있음
스타일 관리	컴포넌트와 스타일을 함께 관리 가능	CSS 파일과 스타일을 별도로 관리하고 최적화 가능
장점	컴포넌트화된 스타일링, 동적 스타일링 가능	빠른 렌더링, 스타일 최적화 가능, 전통적인 CSS 방식 호환
단점	성능 저하, FOUC 가능성, 런타임 의존	동적 스타일링에 유연성 부족, 스타일 코드 중복 가능성