CSS Module

코드의 가독성과 유지보수를 위해 css 코드를 분리하는 것을 선호하는 편이다.

문제는 리액트 프로젝트에서는 .css 파일을 컴포넌트에서 바로 import했을 경우 css 클래스가 중첩될 수 있다는 것이다. 어떤 컴포넌트에서 import되었더라도 전체 HTML 코드에서는 head태그 안에 style로 저장되기 때문에, 모든 컴포넌트에 적용된다. 따라서 실수로 클래스 이름을 같게 했다면 다른 엘리먼트에 같은 스타일이 적용되고, 코드가 길어질수록 이런 문제는 자주 발생하게 된다.

이를 해결하기 위해 CSS Module을 사용한다. CSS Module을 사용하면 해당 CSS 파일에 선언한 클래스 이름들이 모두 고유해지기 때문에 클래스 중첩을 완벽히 방지할 수 있다.

 

CRA(create-react-app)으로 만든 프로젝트에서는 CSS 파일의 확장자를 .module.css로 저장한 후 컴포넌트에서 styles로 import해 사용한다.

/* Box.module.css */
.Box {
  background: black;
  color: white;
  padding: 2rem;
}

/* Box.js */
import React from "react";
import styles from "./Box.module.css";

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

위와 같은 코드를 작성한다면

이렇게 클래스에 고유한 이름이 자동으로 생성된다. 따라서 다른 컴포넌트에 Box라는 클래스명을 사용해도 고유한 스타일을 적용할 수 있다.