React - 쉽게 css Module 설정

create-react-app으로 만들때 버전에 따라 가능한지는 모르겠지만

최신버전으로서는 쉽게 css Module을 설정 할 수 있다.

 

CSS Module

CSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술입니다. 이를 사용하기 위해선, [파일이름].module.css 이런식으로 파일을 저장하셔야 합니다.

한번, CSSModule.module.css 라는 스타일을 먼저 작성해봅시다.

src/CSSModule.module.css

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

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

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

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

자바스크립트로 컴포넌트도 작성해볼까요?

src/CSSModule.js

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;

위 코드처럼 styles 를 불러오면 하나의 객체를 전달받게 되는데 그 안에는 CSS Module 에서 사용한 클래스 이름과, 해당 이름을 고유화시킨 값이 key-value 형태로 들어있습니다.

한번 console.log(styles) 를 하면 이런 결과가 나타납니다:

{
  wrapper: "CSSModule_wrapper__CUMkx"
}

그리고, 이걸 사용하기 위해선 className={styles.[클래스이름]} 형태로 설정을 해주시면 됩니다.

다 작성하셨으면 App 컴포넌트에서 CSSModule 컴포넌트를 렌더링해봅시다.

src/App.js

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

export default App;

출처 : https://velog.io/@velopert/react-component-styling