React 프로젝트에서 사용할 CSS 라이브러리 비교 (PureCSS, PostCSS, Tailwindcss, Styled Components)

CRA에서 기본 사용-postcss, tailwindcss, sass-loader

Pure CSS

1. 순수 css 파일
2. 이름 충돌 문제 발생

 

CSS 파일을 직접 작성하고 컴포넌트에 import 하여 사용한다

동일한 이름이 있을 경우, 가장 나중에 로드된 CSS로 덮어씌워진다

 

PostCSS

컴포넌트.module.css

 

*.module.css 파일로 CSS를 모듈화하고, styles 객체를 가져와 사용한다

동일한 클래스 이름이라도 자동으로 고유한 ID가 붙어 충돌을 방지한다

import styles from ‘./Button1.modle.css’
<button className={styles.button}>Button2</button>;

 

styled Components (CSS-in-JS)

스타일링 된 컴포넌트

 

스타일링 된 컴포넌트를 생성하여 사용한다

컴포넌트이기 때문에 리액트를 위한 스타일링 방법이다

import styled from ‘styled-components’
const Container = styled.div`
	...적용할 스타일
`
const Button = styled.button`...`

 

TailwindCSS

미리 정해진 클래스 이름들로 조립

 

유틸리티 클래스 이름을 조립하여 스타일을 적용한다 

#react 
<button
  className={**`${styles.filter} ${filter === value && styles.selected}`**}
  onClick={() => onFilterChange(value)}
>

#js
// 여러 클래스 이름을 문자열로 설정
**element.className = "class1 class2";**

• @apply : 사용자 지정 스타일
• tailwind.config.js/extends에서 스타일 커스터마이징 가능

 

결론

	장점	단점
Pure CSS	- 직관적 - 외부 의존성 없음	- 이름 충돌 가능성 - 글로벌 범위
Post CSS	- CSS의 모듈화 - 이름 충돌 방지	- 설정 필요
styled-components	- 컴포넌트 기반 - 동적 스타일링	- JS 파일 커짐 - 리렌더링 필요
TailwindCSS	- 빠른 스타일링 - 유연한 커스터마이징	- 긴 클래스 이름  - CSS 지식 필요