CSS Module

CSS Module

CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술

CSS Module을 사용하면 클래스 이름을 지을 때 고유성에 대해 고민하지 안하도 되게 합니다.
기본적으로 css파일을 만들 때 [컴포넌트 이름].module.css 라는 네이밍 컨벤션을 갖습니다.

사용하기 위해선 webpack에서 사용하는 css-loader 가 필요합니다.
CRA로 만든 프로젝트에서는 자동으로 세팅이 되어있어서 자유롭게 가져다 쓸 수 있습니다.

사용법

1. 먼저 [컴포넌트 이름].module.css 라는 이름의 css 를 만들어 줍니다.
2. 컴포넌트 상단에 해당 css를 import (styles와 같은 변수에 담을 수 있음)
3. styles 객체 안에 있는 클래스 값들을 styles.Box와 같은 이름으로 가져오게 되면 해싱 된 값으로 보여지게 됨
4. 만약에 클래스 이름에 -가 들어가 있으면 styles['my-class'] 와 같이 가져옴
5. 여러 개가 있다면 ${styles.one} ${styles.two}와 같이 조회해야함. 이런 번거로움을 개선한 것이 classnames 라이브러리의 bind기능

옵션들

• : global → 글로벌하게 적용되는 CSS임을 알 수 있게 해줌
• : local → 그 해당 컴포넌트에서만 사용될 수 있는 클래스임을 정의

장점

1. 레거시 프로젝트에 리액트를 도입할 때 기존 프로젝트에 있는 css클래스와 이름이 중복되어도 새로운 이름이 입혀지기 때문에 스타일이 꼬이지 않게 해준다.
2. CSS클래스를 중복되지 않게 작성하기 위해 css클래스 네이밍 규칙을 짓기위해 애쓰지 않아도 된다.

classNames 라이브러리

classNames의 bind 기능 이용해 조건부 렌더링이나 여러 개의 클래스를 사용시 좀 더 편하게 사용할 수 있게 함.

사용법

1. npm install classnames
2. component 파일 상단에 import classNames from 'classnames/bind';
3. const cx = classNames.bind(styles);
4. className={cx("클래스 이름")} 과 같이 해당 스타일 가져옴

여러 클래스 사용하기

cx('one', 'two')

조건부 스타일링

cx("my-component", {
  condition: true,
});
cx("my-component", ["another", "classnames"]);

사용 예

import styles from "../styles/Box.module.css";
import { MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

const CheckBox = ({ children, checked, ...rest }) => {
  return (
    <div className={cx("checkbox")}>
      <label>
        <input type="checkbox" checked={checked} {...rest} />
        <div className={cx("icon")}>
          {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
        </div>
      </label>
      <p className={cx("make-this-local")}>local</p>
      <p className="aqua">global</p>{/*글로벌 스타일을 적용할 수 있음*/}
      <span>{children}</span>
    </div>
  );
};

export default CheckBox;

:global .aqua {
  color: aqua;
}
:local .make-this-local {
  color: palevioletred;
}

결과물