React 스타일링 방식 비교 (CSS Modules, styled-components, 일반 CSS)

React 스타일링 방식 비교 (CSS Modules, styled-components, 일반 CSS)

 

방식	모듈화	클래스 충돌 방지	동적 스타일	가독성/유지보수
CSS Modules	✅	✅	❌	✅
styled-components	✅	✅	✅	✅
일반 CSS	❌	❌	❌	❌ (규모 커지면)

 

1. CSS Modules

• 파일 확장자: MyComponent.module.css
• 클래스 이름 자동 고유화 → 충돌 걱정 없음
• 정적인 스타일에 아주 좋고, 유지보수도 용이함

📁 디렉토리 구조

src/
├── components/
│   └── Button/
│       ├── Button.jsx
│       └── Button.module.css
└── App.jsx

Button.module.css

.button {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

Button.jsx

import React from "react";
import styles from "./Button.module.css";

function Button({ label }) {
  return <button className={styles.button}>{label}</button>;
}

export default Button;

App.jsx

import React from "react";
import Button from "./components/Button/Button";

function App() {
  return <Button label="Click Me" />;
}

export default App;

---

2. styled-components

• css-in-js 방식: 스타일을 JS 코드 안에서 정의함
• 동적 스타일링이 강력함 (props로 스타일 제어 가능)
• 컴포넌트와 스타일이 완전히 결합되므로 가독성 & 재사용성 높음
• 단점: 런타임에 스타일이 생성되므로 성능에 약간 영향 있을 수 있음

📁 디렉토리 구조

src/
├── components/
│   └── Button.jsx
└── App.jsx

Button.jsx

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  background-color: ${props => props.primary ? "#007bff" : "#6c757d"};
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
`;

function Button({ label, primary }) {
  return <StyledButton primary={primary}>{label}</StyledButton>;
}

export default Button;

App.jsx

import React from "react";
import Button from "./components/Button";

function App() {
  return (
    <>
      <Button label="Primary" primary />
      <Button label="Default" />
    </>
  );
}

export default App;

---

3. 일반 CSS (App.css 등)

• 전통적인 방식
• React에서 그냥 import './App.css'로 사용
• 프로젝트 규모 작을 땐 괜찮지만, 커지면 클래스 충돌, 스타일 추적 어려움 등의 단점 존재

 

📁 디렉토리 구조

src/
├── components/
│   └── Button.jsx
├── styles/
│   └── Button.css
└── App.jsx

styles/Button.css

.button {
  background-color: orange;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

Button.jsx

import React from "react";
import "../styles/Button.css";

function Button({ label }) {
  return <button className="button">{label}</button>;
}

export default Button;

App.jsx

import React from "react";
import Button from "./components/Button";

function App() {
  return <Button label="Click Me" />;
}

export default App;

---

언제 뭐 써야 할까?

상황	추천 방식
규모가 작고 빠르게 만들고 싶다	일반 CSS or CSS Modules
규모가 크고 유지보수가 중요하다	CSS Modules or styled-components
동적으로 스타일을 변경하고 싶다	styled-components
팀원들이 타입 지원 / 모듈화를 원한다	CSS Modules or styled-components