PostCSS로 모듈화 사용하기

이젠 CSS도 모듈화를 한다..?

자바스크립트로 게임을 만들 때 js 파일을 모듈화 한 적이 있고 리액트도 컴포넌트별로 파일을 나눈다. 토이 프로젝트 수준인데도 불구하고 CSS를 작성할 때마다 조금만 스타일을 추가해도 코드 줄이 길어지고 주석을 추가하고, cmd+f로 클래스 이름을 찾는 나 자신을 보게 되었다. 그런 와중에 리액트를 배우면서 create-react-app으로 프로젝트를 하게 되었고 PostCSS가 기본 탑재 되어있단 것을 알게 되었다.

그럼 예제를 통해 이제 왜 CSS도 모듈화를 하는지 알아보자!

버튼은 두개로 하겠습니다. 근데 이제 서로 다른 스타일을 곁들인

import React from 'react';
import Button1 from './ components/button1';
import Button2 from './ components/button2';
import './app.css';

function App() {
  return (
  <>
    <Button1 />
    <Button2 />
  </>
  );
}

export default App;

App에 버튼 컴포넌트 두개와 .css 파일을 만들고 스타일링을 한다. 두 버튼 다 ClassName은 같지만 스타일은 다르게 줘보자.

간단한 구조

/* button1.css */
.button {
  background-color: cornflowerblue;
  width: 100%;
  height: 50px;
}

.text {
  color: black;
}

/* button2.css */
.button {
  background-color: burlywood;
  width: 100%;
  height: 50px;
}

.text {
  color: white;
}

결과를 확인해보면

button1의 스타일링이 적용되지 않았다.

나중에 읽혀진 button2.css의 스타일링이 덮어 씌워져서 button1의 스타일이 적용되지 않았다.

PostCSS 없이 사용한다면 클래스 이름을 바꾸면 된다. 하지만 컴포넌트가 많다고 가정했을 땐 버튼마다 이름을 바꿔야하고 이름도 고민해야하고 정말 귀찮은 작업이다. BEM 작명법을 써서 그나마 조금 해소할 순 있어도 여전히 번거롭다. 

모듈화를 해보자.

create-react-app에선 자동으로 설정이 되어 있기 때문에 그 설정대로 따라해보면 다음과 같이 하면 된다.

/* 모듈화 전 button1 */
import React, { Component } from 'react';
import './button1.css';

class Button1 extends Component {
    render() {
        return (
            <div>
                <button className="button">
                    <span className="text">Button1</span>
                </button>
            </div>
        );
    }
}

export default Button1;

/* 모듈화 후 button1 */
import React, { Component } from 'react';
import styles from './button1.module.css';

class Button1 extends Component {
    render() {
        return (
            <div>
                <button className={styles.button}>
                    <span className={styles.text}>Button1</span>
                </button>
            </div>
        );
    }
}

export default Button1;

import와 파일명 그리고 className 표현을 중괄호({styles.})로 정의하면 된다. 

서로 다른 스타일이 적용되었다.

신기하게 PostCSS가 클래스 이름을 자동으로 바꿔서 스타일을 적용했다.

마치며

이제 막 배우고 해보는 중이라 크게 와닿지는 않지만 왜 사용하는지는 알 것 같다. 나중에 큰 프로젝트를 하거나 컴포넌트들이 많아지면 유용할 것 같고 이제 CSS도 전체를 신경쓰지 않고 내 임의대로 나눠서 스타일링하면 훨씬 편리할 것 같다. 브라우저 호환성도 알아서 해결해주고 플러그인으로 확장성도 좋으니 이 얼마나 좋은 도구인지! 게다가 깃허브, 구글, 페이스북 등에서도 사용했다고 하니 어느정도 검증은 된 것 같다.