4가지 패러다임

Utility-First	tailwind CSS	미리 정의된 css 클래스를 적용
CSS-in-CSS	CSS Modules	css 파일을 사용하되, 클래스 이름을 고유하게
CSS-in-JS	Emotions, styled-components	JS 코드 내에서 컴포넌트 단위 -> 동적 스타일링
Component Library	MUI, shadcn/ui	미리 디자인 되고 기능이 구현된 UI 컴포넌트 집합 제공

Tailwind CSS

• 제공 : 기능 중심의 작은 유틸리티 클래스
  ex) flex, pt-4, text-center
• 사용 : html 요소에 직접 조합
• 특징
  - 빠른 개발 속도
  • 디자인 시스템 강제 : tailwind.config.js
  • 높은 자유도와 낮은 추상화
• 단점
  - html 코드 복잡

CSS Modules

• 제공 : 순수 css 문법 그대로 사용, css 스타일이 파일을 임포트 한 컴포넌트에만 locally하게 적용
  - 클래스 이름에 고유한 해시값 추가
• 특징
  - 지역 스코프 스타일 : 클래스 이름 충돌 x
  • 쉽게 이용
  • 명시적 의존성 : import 구문
• 단점
  - 동적 스타일링 한계

CSS-in-JS

• 핵심 : 컴포넌트와 스타일을 하나로 묶어 관리
• 특징
  - 컴포넌트 기반 스타일링
  • 동적 스타일링 : props나 state에 따라 동적으로 변경
  • 자동 접두사
• 단점
  - 런타임 오버헤드 : SSR 환경에서 추가 설정 필요, 미세 성능 저하
• React 프로젝트에 추천

Emotion

• styled 문법 외에도 css prop을 통해 기본 컴포넌트에 스타일을 주입
• 유연성 높음
• 번들 크기가 더 작음

Styled-comonents

• styled.div 문법 사용

MUI : Material-UI

• "완성형 컴포넌트 라이브러리"
• 구글의 Material Design 가이드라인 따르는 React 컴포넌트 제공
• 버튼, 입력창, 데이터 그리드 등 UI 요소 사용
• 특징
  - 높은 생산성
  • 디자인 일관성
  • 풍부한 문서
• 단점
  - 커스터마이징 제한
  • 번들 크기가 큼

shadcn/ui

• npm install로 설치하지않고 CLI를 사용해 소스코드를 프로젝트에 복사
• 특징
  - 외부 라이브러리 종속성 없음
  • Tailwind CSS 기반
  • 최소한 번들
• 단점
  - 수동 업데이트