CSS Module

css 모듈은 css를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 파일이름클래스 이름해시값 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.
확장자를 module.css확장자로 파일을 저장하면 적용된다.

// CSSModule.module.css

/* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */


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



/* 글로벌 CSS를 작성하고 싶다면 */



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

이를 활용하면 클래스 이름을 지을 때 그 고유성에 대해 고민하지 않아도 된다.
흔히 사용하는 단어로 이름을 짓는다고 해도 문제가 되지 않는다. 해당클래스는 우리가 방금 만든 스타일을 직접 불러온 컴포넌트 내부에서만 작동하기 때문이다.

특정 클래스가 전역으로 사용되는 경우라면, :global을 앞에 입력하여 글로벌 CSS임을 명시해 줄 수 있다.

리액트 컴포넌트에 적용해보자.

import React from "react";
import styles from "../CSSModule.module.css";

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

export default CSSModule;

css 모듈이 적용된 스타일 파일을 불러오면 객체를 전달받게 되는데,
css모듈에서 사용한 클래스 이름과 해당 이름을 고유화한 값이 키-값 형태로 들어있다.
예를 들어 위 코드에서 console.log(styles)을 한다면,
{wrapper: 'CSSModule_wrapper__3LknK'}
이와 같은 값이 나타난다.
우리가 지정한 클래스 앞 뒤로 파일 이름과 해시값이 붙은 것이다.

이 고유한 클래스 이름을 사용하려면, 클래스를 적용하고 싶은 JSX 엘리먼트에
className={styles.[클래스이름]}형태로 전달해주면 된다.

클래스 이름을 두 개 이상 적용할 때는 다음과 같다.

/* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */

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

.inverted {
  color: black;
  background: white;
  border: 1px solid black;
}

/* 글로벌 CSS를 작성하고 싶다면 */

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

import React from "react";
import styles from "../CSSModule.module.css";

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

export default CSSModule;

classnames

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

먼저 yarn add 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 myClass = ‘hello’;
classNames(‘one’, myClass, { myCondition: true }); // = ‘one hello myCondition‘

이와 같이 여러 파라미터를 조합해 CSS클래스를 설정할 수 있기 때문에 컴포넌트에서 조건부로 클래스를 설정할 때 편리하다.