리액트에서 CSS Module 사용하기 (CSS Module in React)

create-react-app 명령어로 React 프로젝트를 생성하면 자동으로 자리하고 있는 index.css와 APP.css를 보며 각각의 쓰임이 궁금했다.

(chat GPT한테 물어보니 바로 알려줌..wow)

index.css에는 기본 폰트 스타일 등
프로젝트 전역에 영향을 주는 스타일을 작성한다.
App.css는 컴포넌트에 한정된 내용을 반영한다. 그러나 App.css에 스타일을 작성하면 컴포넌트에만 종속되는 것이 아니라 전 페이지에 영향을 줄 수 있다.

간단한 프로젝트라면 className에 혼선이 있지는 않겠지만 파일이 늘어나고 코드가 길어지면 네이밍에 실수가 있을 수 있다. 혹여 서로 다른 컴포넌트에서 같은 className을 사용했을 경우 원래 의도했던 스타일이 아닌 다른 스타일로 덮어씌워지는 경우가 발생할 수 있다.

이럴 때 CSS Module을 이용하면 서로 다른 파일에서 같은 className을 사용하고 있더라도 해당 컴포넌트에만 적용되는 스타일을 작성할 수 있다. css 클래스가 중첩되는 것을 방지할 수 있다는 뜻이다.

사용 방법은 간단하다.
CSS 파일의 확장자를 .module.css로 작성하면 된다.
예를 들어 Header라는 컴포넌트 내부의 box라는 className을 가진 태그에 스타일을 주려고 할 때,

1. 컴포넌트.module.css 파일 만들기

/*Header.module.css*/

.box {
width: 200px;
height: 200px;
background-color: yellowgreen;
color: black;
}

Header.module.css파일에 해당 컴포넌트의 스타일을 작성한 후
해당 컴포넌트에서 import해와야 한다.

2. 컴포넌트에 CSS Module import 후 적용하기

• import 방법 : import styles from "./Header.module.css"
• 적용 방법 : <div className={styles.box}>

//Header.js

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

function Header() {
  return <div className={styles.box}></div>
}

export default Header;

이렇게 import 해오고, 스타일을 적용할 수 있다.
className을 설정할 때는 styles.box 이런 식으로 import로 불러온 styles 객체 안에 있는 값을 참조해야 한다.

이렇게 하면 실수로 여러 컴포넌트에 box라는 className을 중복해서 사용했더라도 해당 컴포넌트에만 영향을 주는 스타일을 작성할 수 있다.
오버라이딩, 상속, 네이밍 등의 고민을 해결할 수 있는 것이다.

CSS Module을 사용하면 글로벌이 아닌 컴포넌트 단위로 관리되는 장점이 있다.
물론 CSS 클래스 중복을 방지하기 위해 CSS 클래스 네이밍 규칙을 만들고 그것을 따른다면 CSS Module은 사용하지 않아도 된다.
CSS Module은 CSS 클래스 네이밍 규칙을 만들지 않았을 때 유용할 것 같다.