- Published on
Styled Component vs Tailwind CSS (Comparison and CSS In JS with SSR)
- Authors
- Name
- Easyoon
CSS in JS, Tailwind CSS, 및 Next.js 조합에 대한 개요
CSS in JS란?
CSS in JS는 JavaScript 코드 내부에서 CSS 스타일을 작성하고 관리하는 방식입니다. React 컴포넌트와 같은 컴포넌트 기반 개발에서 스타일을 보다 편리하게 적용할 수 있는 장점이 있습니다. CSS in JS 라이브러리로는 styled-components, emotion, JSS 등이 있으며, 특히 styled-components는 React와 잘 결합되어 컴포넌트별로 캡슐화된 스타일링을 제공합니다.
CSS in JS의 단점
CSS in JS는 여러 장점을 가지고 있지만, 다음과 같은 단점이 있습니다.
- 런타임 성능 저하: 일부 CSS in JS 라이브러리는 스타일을 런타임에 생성하기 때문에, 복잡한 페이지에서는 성능 저하가 발생할 수 있습니다.
- 번들 사이즈 증가: JavaScript 코드에 스타일이 포함되어 번들 크기가 커지며, 초기 로딩 시간이 증가할 수 있습니다.
- SSR(서버 사이드 렌더링) 호환성: Next.js와 같은 프레임워크에서
styled-components를 사용할 경우, 스타일을 미리 추출하는 설정이 필요합니다. 그렇지 않으면 스타일이 누락되거나 FOUC(Flash of Unstyled Content) 현상이 발생할 수 있습니다.
런타임 CSS와 컴파일타임 CSS의 차이
- 런타임 CSS: CSS in JS의 경우 스타일이 런타임에 생성되고 JavaScript와 함께 로드됩니다. 이는 동적인 스타일을 설정하는 데 유리하지만, 초기 로딩 속도에 영향을 줄 수 있습니다.
- 컴파일타임 CSS: SCSS 같은 전처리기를 통해 컴파일된 CSS는 빌드 시점에 미리 생성됩니다. 브라우저는 이 정적인 CSS 파일을 캐싱하여 성능을 최적화할 수 있습니다. 빌드된 CSS는 별도의 CSS 파일로 제공되기 때문에, 초기 렌더링에 유리합니다.
Next.js와 CSS in JS의 호환성
Next.js는 SSR을 지원하므로, 초기 렌더링 성능이 매우 중요합니다. styled-components와 같은 CSS in JS 라이브러리를 Next.js와 결합할 경우, getInitialProps와 _document.js에서 SSR을 위한 설정을 추가하여 스타일이 서버에서 미리 렌더링되도록 해야 합니다. 이를 통해 FOUC 현상을 방지하고 초기 로딩 성능을 개선할 수 있습니다.
Tailwind CSS의 동작 원리
Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 사전 정의된 유틸리티 클래스를 조합하여 스타일을 적용합니다. Tailwind는 필요한 유틸리티 클래스만 포함하도록 미리 컴파일되어, 불필요한 CSS가 포함되지 않아 번들 사이즈가 작아집니다.
Tailwind CSS의 장점
- 작은 번들 크기: 필요하지 않은 클래스는 포함되지 않기 때문에 번들 사이즈가 작아집니다.
- 반응형 디자인 간소화: 미리 정의된 반응형 유틸리티 클래스를 사용하여 빠르게 반응형 레이아웃을 구현할 수 있습니다.
- 유연한 스타일 조합: 클래스를 조합하여 다양한 스타일을 손쉽게 구성할 수 있습니다.
Tailwind CSS와 Styled Components의 비교
| 특징 | Tailwind CSS | Styled Components |
|---|---|---|
| 스타일링 방식 | 유틸리티 클래스 기반 스타일링 | 컴포넌트별 스타일 정의 |
| 번들 크기 | 사용하지 않는 클래스는 제거 가능하여 작음 | JavaScript와 번들링되어 크기가 증가할 수 있음 |
| 반응형 지원 | 미리 정의된 반응형 클래스 제공 | CSS 미디어 쿼리로 구현해야 함 |
| Interactive 스타일링 | 제한적 (클래스 조합으로 해결) | Interactive 스타일링 가능 |
| 사용 편의성 | 직관적인 유틸리티 클래스 사용 | 자바스크립트와 CSS 통합된 형태 |
Next.js와 Styled Components의 조합: 괜찮은 선택일까?
Next.js와 styled-components를 조합하는 것은 SSR 설정을 통해 FOUC 현상을 해결하고, 초기 렌더링 성능을 신경 쓴다면 적절한 선택이 될 수 있습니다. 특히, 상태 변화에 기반한 Interactive 스타일링이 필요한 애플리케이션에서는 styled-components의 장점을 충분히 활용할 수 있습니다. 다만, 페이지의 인터랙티브한 요소가 많지 않다면 Tailwind CSS와 같은 유틸리티 퍼스트 프레임워크를 사용하는 것이 오히려 성능에 유리할 수 있습니다.
요약
Next.js와 styled-components의 조합은 SSR 설정을 통해 스타일 누락 문제를 해결한다면 좋은 선택이 될 수 있습니다. 그러나 복잡한 인터랙티브 요소가 많지 않다면, 스타일링 복잡성을 줄이기 위해 Tailwind CSS와 같은 유틸리티 기반 프레임워크도 고려해 볼 만합니다.