✅ 12편. 리액트에서 CSS 스타일링 방법 총정리 (Styled-Components, CSS Modules 등)

✅ 12. 리액트에서 CSS 스타일링 방법 총정리 (Styled-Components, CSS Modules 등)

리액트는 스타일링 방법이 다양합니다.
각 방법의 특징과 사용 시기를 알면 프로젝트 구조가 훨씬 깔끔해집니다.

✔ 1. CSS Module

파일 이름: Button.module.css
.button {
background: blue;
color: white;
}
사용:
import styles from "./Button.module.css";
<button className={styles.button}>버튼</button>
장점
클래스명 충돌 없음
사용 편리

✔ 2. Styled-Components

JS 안에 CSS를 작성하는 기법입니다.
import styled from "styled-components";
const Button = styled.button`
background: blue;
color: white;
`;
장점
props에 따라 스타일 동적 변경 가능
컴포넌트 단위 구조
글로벌 스타일도 가능

✔ 3. Tailwind CSS

유틸리티 클래스 기반 스타일링
<button className="bg-blue-500 text-white px-4 py-2">
버튼
</button>
장점
매우 빠르고 일관된 UI 개발
커스터마이징 쉬움

✔ 4. Inline CSS

간단한 스타일 적용
<button style={{ color: "red" }}>버튼</button>
단, 유지보수는 어렵습니다.

✔ 5. 어떤 방식이 좋은가?

방식 장점 추천 용도
CSS Module 충돌 없음, 가벼움 소형/중형 프로젝트
Styled-Components 동적 스타일, 편리 중대형 프로젝트
Tailwind CSS 빠른 개발, 일관성 대형 UI 시스템
Inline CSS 간단 임시 스타일