스타일링 전략: Tailwind CSS 및 CSS Modules 통합
4. 스타일링 전략: Tailwind CSS 및 CSS Modules 통합
리액트 컴포넌트를 예쁘게 꾸미는 방법은 아주 다양합니다. 그중 현대 프론트엔드 실무에서 가장 사랑받는 두 가지 방식이 있습니다.
클래스 이름 충돌을 원천 차단해 주는 CSS Modules와, CSS 파일 작성 없이 HTML(JSX) 안에서 클래스명만으로 디자인을 완성하는 유틸리티 퍼스트 프레임워크 Tailwind CSS입니다. 상황에 맞게 이 두 가지를 섞어 쓰는 통합 전략을 배워봅시다.
💡 핵심 비유: 맞춤복과 트렌디한 기성복
CSS Modules (맞춤복): 나만의 컴포넌트를 위해 치수를 재고 패턴을 만들어 딱 맞게 재단한 옷입니다. 다른 사람(컴포넌트)의 옷과 디자인(클래스명)이 겹칠 일이 없습니다.
Tailwind CSS (기성복): 미리 예쁘게 재단된 수천 개의 파츠(Utility Class)들을 조합해서 즉석에서 옷을 만들어 입는 방식입니다. 매우 빠르고 트렌디합니다.
⚡ CSS 충돌을 막는 메커니즘 비교
📋 두 가지 스타일링 전략 비교
| 비교 항목 | CSS Modules | Tailwind CSS |
|---|---|---|
| 방식 | 컴포넌트마다 .module.css 파일을 개별 생성 |
JSX의 className에 유틸리티 클래스 나열 |
| 장점 | 기존 CSS 문법 100% 활용, 완벽한 관심사 분리 | 개발 속도가 압도적으로 빠름, 파일 이동 불필요 |
| 단점 | 파일이 많아지고 이름 짓기가 귀찮음 | HTML 코드가 길어지고 지저분해 보일 수 있음 |
| 추천 상황 | 복잡하고 정교한 애니메이션, 독창적인 커스텀 디자인 | 빠른 프로토타이핑, 일관된 디자인 시스템 적용 시 |