CSS 모듈 활용

웹 스타일 모듈화 ▸ JS 파일에서 불러오기

CRA는 파일 명명 규칙(naming convention)을 사용하는 CSS 모듈 방식을 지원합니다. CSS 모듈을 사용 하면 고유한 클래스 이름을 자동으로 생성하여 CSS 적용 범위(scope)를 지정할 수 있습니다. 일반 CSS 파일 불러오기와 구분되는 CSS 모듈 파일을 불러오는 방법은 CSS 파일 이름을 다음과 같이 작성하는 것입니다.

[name].module.css

호출 된 CSS 모듈 파일의 스타일 모듈을 Rect 컴포넌트에서 사용하면 클래스 이름이 다음과 같이 생성됩니다.

.[파일이름]\_[클래스이름]\_\_[해시값] {
  /* ... */
}

CSS 모듈을 사용하면 이름 충돌 문제에 대한 걱정 없이 다른 파일에서도 동일한 CSS 클래스 이름을 사용할 수 있습니다.

모듈 활용 방법

Button, Notification 컴포넌트 스타일은 모두 오류 상태를 표시하는 스타일을 가질 수 있습니다. 일반적인 CSS에서는 BEM 표기법을 사용해 .Button--error, .Notification--error 클래스 이름을 사용해 이름 충돌 문제를 해결할 수 있지만, 모듈을 사용하면 클래스 이름이 동일하더라도 문제가 발생하지 않습니다.

예를 들어 다음과 같이 Button, Notification 컴포넌트의 각 스타일 파일에서 동일한 .error 클래스 이름을 사용하지만 이 이름은 글로벌 클래스 이름이 아니므로 아무런 문제가 되지 않습니다.

Button.module.css

.error {
  background-color: #f0011e;
}

Notification.module.css

.error {
  background-color: #e64a19;
}

Button 컴포넌트에서 Button.module.css 파일을 불러온 후 스타일 모듈(JavaScript object)의 클래스 이름 멤버를 사용해 React 요소의 클래스 이름으로 설정합니다.

Button.js

// 버튼 CSS 모듈 파일 불러오기
import styles from './Button.module.css';

// JavaScript 객체
console.log(styles) // { error: 'ax7yz' }


export default function Button(props) {
  // JavaScript 객체 참조
  return <button type="button" className={styles.error} {...props} />
}

컴파일 결과

글로벌 .error 클래스 이름과 충돌이 없는 고유한 클래스 이름이 버튼에 설정된 것을 확인 할 수 있습니다.

<button type="button" class="Button_error_ax7yz">오류</button>