CSS Module

CSS Module: 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 사용하는 기술 → CSS 클래스가 중첩되는 것을 방지

⭐️ CRA(create-react-app)로 만든 프로젝트에서 CSS Module를 사용할 때, CSS파일 확장자를 .module.css로 하면 됨

사용법

[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;

→ className을 설정 할 때에는, styles.Box 처럼 import로 불러온 styles객체 안에 있는 값을 참조

→ 클래스 이름에 대하여 고유한 이름을 만들기 때문에, CSS 클래스 이름이 다른 곳에서 사용한 이름과 중복되는 일이 없음

 

사용하기 적합한 상황

• 레거시 프로젝트(프로그래밍 언어, 플랫폼 그리고 기술 등에 있어서 과거로부터 물려 내려온 것을 의미)에 리액트를 도입할 때
• CSS 클래스를 중복되지 않게 작성하기 위하여 CSS 클래스 네이밍 규칙 만들기 귀찮을 때

CSS 클래스 네이밍 규칙

1. 컴포넌트의 이름은 다른 컴포넌트랑 중복되지 않게 함.

2. 컴포넌트의 최상단 CSS 클래스는 컴포넌트의 이름과 일치시킴 (ex: .Button)

3. 컴포넌트 내부에서 보여지는 CSS 클래스는 CSS Selector를 잘 활용한다. (ex: .MyForm .my-input)

 

---

CSS Module은 별도로 설치해야 할 라이브러리 없음 ▸ webpack(여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler)에서 사용하는 css-loader에서 지원

 

아이콘들을 컴포넌트 형태로 쉽게 사용할 수 있는 라이브러리: react-icons

$ yarn add react-icons

• 클래스 이름에 - 가 들어가 있다면 styles['my-class']로 작성
• 만약 여러개가 있다면, ${styles.one} ${styles.two}로 작성
• 조건부 스타일링은 ${styles.one} ${condition ? styles.two : ''}로 작성

 CSS Module인 classnames라이브러리의 bind기능 사용

→ CSS 클래스 이름 지정해줄 때, cx('클래스 이름')과 같은 형식으로 편하게 사용 가능

ex)

cx('one', 'two')
cx('my-component', {
	condition: true
})
cx('my-component', ['another','classnames'])

✔︎ 참고 내용

• CSS Module은 Sass에서도 사용 가능 → 확장자를 .module.scss로 바꿔주면 됨 (그 전에 node-sass 설치필요)
• CSS Module을 사용하고 있는 파일에서 클래스 이름을 고유화 하지 않고 전역적 클래스이름을 사용하고 싶은 경우 → :global

:global .my-global-name{
}

[Sass의 경우]

:global {
	.my-global-name{
   	}
}

• CSS Module을 사용하지 않는 곳에서 특정 클래스에서만 고유 이름 만들어서 사용하고 싶은 경우 → :local

:local .make-this-local{
}

[Sass의 경우]

:local {
	.make-this-local{
    }
}