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 지식 필요 |
