[CSS] CSS Module?(Feat. classnames library)

1. CSS Module?

CSS module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.

[파일이름]_[클래스 이름]_[해시값]

CSS Moudle을 사용하면 클래스 이름을 지을 때 그 고유성에 대해 고민하지 않아도 된다. 해당 클래스는 스타일을 직접 불러온 컴포넌트 내부에서만 작동하기 때문이다.

코드 예시

• CSSMoudle.module.css

.wrapper {
    background: black;
    padding:1rem;
    color:white;
    font-size:2rem;

}

:global .something {
    font-weight: 800;
    color:aqua;
}

:global은 해당 클래스가 웹페이지에서 전역적으로 쓰일 때 사용한다.

• CSSMoudle.jsx

import styles from './CSSModule.module.css';

const CSSModule = () => {
    console.log(styles)
    return(
        <div className={styles.wrapper}>
            안녕하세요, 저는 <span className="something">CSSModule!!</span>
        </div>
    )
}

export default CSSModule;

console.log(styles)의 결과는 👉 wrapper: "CSSModule_wrapper__2msC2"

class를 지정할 때, className = {styles.[클래스명]}으로 하며, 전역클래스를 지정할 때는 일반 클래스명을 지정하듯이 className="[문자열]"로 해주면 된다.

클래스 이름을 두 개 이상 적용할 때?

리터럴 문법(`) 또는 .join(' ')을 사용하자

• CSSMoudle.module.css

.wrapper {
    background: black;
    padding:1rem;
    color:white;
    font-size:2rem;
}
.inverted {
    color:black;
    background: white;
    border: 1px solid black;
}

:global .something {
    font-weight: 800;
    color:aqua;
}

• CSSModule.jsx

import styles from './CSSModule.module.css';

const CSSModule = () => {
    console.log(styles)
    return(
        <div className={`${styles.wrapper} ${styles.inverted}`}>
            안녕하세요, 저는 <span className="something">CSSModule!!</span>
        </div>
    )
}

export default CSSModule;

CSSModule.jsx에서 리터럴 문법을 사용하여 두 개의 클래스명을 적용

• CSSModule.jsx

import styles from './CSSModule.module.css';

const CSSModule = () => {
    console.log(styles)
    return(
        <div className={[styles.wrapper, styles.inverted].join(' ')}>
            안녕하세요, 저는 <span className="something">CSSModule!!</span>
        </div>
    )
}

export default CSSModule;

.join(' ')을 이용하여 클래스명 두 개를 사용할 수도 있다

아래와 같이 Scss 문법을 적용하여 CSSModule을 작성할 수도 있다 ✔

• CSSMoudle.module.scss

.wrapper {
    background: black;
    padding:1rem;
    color:white;
    font-size:2rem;
    
    &.inverted {
    color:black;
    background: white;
    border: 1px solid black;
  }
}
:global {
  .something {
    font-weight: 800;
    color:aqua;
  }
}

2. classnames library

classnames 라이브러리는 CSS 클래스를 조건부로 설정할 때 유용한 라이브러리다.👍

npm install --save classnames

기본적인 사용법

import classNames from 'classnames';

classNames('one', 'two'); // = 'one two'
classNames('one', { two : true}); // = 'one two'
classNames('one', { two : false}); // = 'one'
classNames('one',['two', 'three']); // = 'one two three'

const tempClass = 'React';
classNames('one', tempClass, {myCondi:true}); // = 'one React myCondi

사용 예시

const MyComponent = ({ highlighted, theme }) => {
  <div className={classNames('myComponent', {highlighted}, theme}
}

highlighted의 값이 true면 highlighted 클래스가 적용되고 false면 적용되지 않는다. theme을 통해 전달받는 문자열은 그대로 클래스에 적용 가능하다.

CSS Module에 classnames 라이브러리 적용하기

import styles from './CSSModule.module.css';
import classnames from './classnames/bind';

const cx = classNames.bind(styles);

const CSSModule = () => {
    console.log(styles)
    return(
        <div className={cx('wrapper', 'inverted')}>
            안녕하세요, 저는 <span className="something">CSSModule!!</span>
        </div>
    )
}

export default CSSModule;

bind함수를 사용하여 미리 바인딩을 한다

cx('클래스명1', '클래스명2')의 형태로 사용 가능하며 훨씬 편리하다는 것을 알 수 있다.