React에서 CSS 파일을 사용하는 두 가지 방법 _ about.css vs about.module.css

 

리액트 에서 컴포넌트마다 스타일을 입혀야 할 일이 많습니다.
그때 사용하는 CSS 파일에 두 가지 방식이 있습니다. 

일반 CSS (about.css)와 CSS 모듈 (about.module.css)입니다.
두 방식의 차이와 언제 어떤 걸 써야 하는지 간단하게 정리해볼게요.

1. 일반 CSS  : about.css

가장 기본적인 방식입니다.
.css 파일을 만들고 className="클래스명" 형태로 스타일을 적용합니다.

 

About.jsx

import './about.css';

function About() {
  return <h2 className="title">About Me</h2>;
}

 

about.css

.title {
  color: red;
}

 

장점

• 기존 CSS 방식에 익숙한 사람에게 편리함
• 전역 스타일을 정의할 때 유용

단점

• 클래스명이 전역이기 때문에, 다른 컴포넌트에서도 title을 쓰면 스타일이 충돌할 수 있음

2. CSS 모듈 _about.module.css

파일명을 .module.css로 작성하면, 리액트가 이 파일을 *로컬 스코프로 인식합니다.
즉, 클래스명이 컴포넌트 안에서만 작동하며 자동으로 고유한 이름으로 바뀝니다.

코드	실제 HTML 적용되는 클래스
className="title"	<section class="title">
className={styles.title}	<section class="About_title__abc123">

 

 

about.module.css

.title {
  color: red;
}

About.jsx

import styles from './about.module.css';

function About() {
  return <h2 className={styles.title}>About Me</h2>;
}

 

*로컬 스코프(Local Scope)란?

• 정의: 로컬 스코프는 특정 방(함수나 코드 블록) 안에서만 보이는 변수의 범위입니다. 그 방 안에서만 사용할 수 있고, 다른 방에서는 사용할 수 없어요.
• 예시: 여러분이 자기 방에서만 쓰는 물건이 있다면, 그 물건은 로컬 스코프를 가지는 것과 같습니다. 다른 가족 구성원은 그 물건을 사용할 수 없죠.

 

장점

• 클래스명이 겹쳐도 충돌하지 않음
• 컴포넌트마다 스타일을 독립적으로 관리할 수 있음
• 팀 작업 시 유용 (스타일 충돌 방지)

단점

• 클래스명을 문자열로 쓰는 대신, styles.title 식으로 객체로 접근해야 함
• 처음에는 약간 생소할 수 있음

마무리 

두개 항목 비교 

항목	about.css (일반 CSS)	about.module.css (CSS 모듈)
스타일 적용 범위	전역 (Global)	로컬 (컴포넌트에만 적용됨)
클래스 충돌 위험	있음	없음
사용 방법	className="title"	className={styles.title}
실제 html 적용시	<div class="title">~</div>	<div class="About_title_abc123">~</div>
특징	전통적인 방식	리액트 전용 모듈 방식

 

 

상황별 쓰임

상황	추천방식
전체 레이아웃, 공통 버튼 스타일 관리	about.css
컴포넌트 단위로 독립적인 스타일이 필요할 때	about.module.css
스타일 충돌 없이 안전하게 작업하고 싶을 때	about.module.css

 

• 간단하거나 전역 스타일이 필요하다면 → about.css
• 컴포넌트 단위로 독립적인 스타일이 필요하다면 → about.module.css

리액트 프로젝트 규모가 커질수록 CSS 모듈이 훨씬 깔끔하고 유지보수도 쉽습니다.