module.SCSS와 bind

CSS Modules

CSS 파일을 여러개 정의하면, 다른 파일이지만 같은 classname으로 스타일이 겹치는 경우가 있다. 이때 사용할 수 있는 것이 CSS Moduels라는 개념이다. 이는 CSS 클래스 이름을 로컬 스코프로 한정하여 한 컴포넌트에서 정의된 클래스는 다른 컴포넌트와 충돌하지 않도록 고유화한다. 즉, 해시 형태로 변환하는데 .button 이라는 클래스를 정의하면, 실제 DOM에 적용될 때는 _button_2xF1A와 같이 고유화된 이름으로 변환되어 적용된다.

 

classnames 라이브러리

CSS 모듈을 사용하는 경우, 클래스 이름이 해시값으로 변환되므로 기본 classname 사용이 어려울 수 있다. 이를 해결하기 위해 classnames/bind를 활용한다. 설치와 활용 방법은 아래와 같다.

npm install classnames

import classNames from "classnames/bind";
import styles from "./Tab.module.scss";

// bind 메서드를 사용하여 스타일 객체와 연결
const cx = classNames.bind(styles);

const Tab = ({ isActive }) => {
  return (
    <div className={cx("tab-container")}>
      <button className={cx("tab-btn", { active: isActive })}>
        Tab Button
      </button>
    </div>
  );
};

export default Tab;