[React] CSS Module

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

❓🤔 CSS Module을 사용하려면?
👉 css-loader 설정을 별도로 해야 했지만, v2 버전 이상부터는 따로 설정할 필요 없이 .module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용된다.

---

• 예제
  • SSModule.module.css

    /* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */
    .wrapper {
     background: black;
     padding: 1rem;
     color: white;
     font-size: 2rem;
    }
    
    /* 글로벌 CSS를 작성하고 싶다면 */
    :global .something {
     font-weight: 800;
     color: aqua;
    }

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

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

• CSS Module을 사용하는 리액트 컴포넌트 예시
  • SSModule.js

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

    
    

CSS Module이 적용된 스타일 파일을 불러오면 객체를 하나 전달받게 되는데 CSS Module에서 사용한 클래스 이름과 해당 이름을 고유화한 값이 키-값 형태로 들어 있다.

// 예: 위 코드에서 console.log(styles)를 한다면 다음과 같은 결과가 나타남.
{ wrapper: "CSSModule_wrapper__1SbdQ" }

우리가 지정한 클래스 이름 앞뒤로 파일 이름과 해시값이 붙음.

이 고유한 클래스 이름을 사용하려면 클래스를 적용하고 싶은 JSX 엘리먼트에 className= {styles.[클래스 이름]} 형태로 전달해 주면 된다. :global을 사용하여 전역적으로 선언한 클래스의 경우 평상시 해 왔던 것처럼 그냥 문자열로 넣어준다.

CSSModule 관련 컴포넌트와 스타일을 모두 작성했다면 App 컴포넌트에서 렌더링해보자.

//  App.js
import React, { Component } from 'react';
import CSSModule from './CSSModule';
 
class App extends Component {
  render() {
    return (
      <div>
        <CSSModule />
      </div>
    );
  }
}
 
export default App;

• CSS Module을 사용한 클래스 이름을 두 개 이상 적용할 때
  • CSSModule.module.css

    /* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */
    
    .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;
    }

    
    
  • CSSModule.jsx

    import styles from './CSSModule.module.css';
    
    const CSSModule = () => {
    return (
      <div className={`${styles.wrapper} ${styles.inverted}`}>
        안녕하세요, 저는 <span className="something">CSS Module!</span>
      </div>
    );
    };
    
    export default CSSModule;

위 코드에서는 ES6 문법 템플릿 리터럴(Template Literal)을 사용해 문자열을 합해 줬다. 이 문법을 사용하면 문자열 안에 자바스크립트 레퍼런스를 쉽게 넣어 줄 수 있다.

const name = '리액트';
// const message = '제 이름은 ' + name + '입니다.'
const message = `제 이름은 ${name}입니다.`;

여기서 사용되는 문자는 백틱(Backtick)이라고 부르고, 키보드에서 숫자키 1 왼쪽에 있는 '키이다.

CSS Module 클래스를 여러 개 사용할 때 템플릿 리터럴 문법을 사용하고 싶지 않다면 다음과 같이 작성할 수도 있다.

className={[styles.wrapper, styles.inverted].join(' ')}