[React] 리액트 스타일링 (css module, classnames)

기본적인 html 파일에서는 DOM 요소에 특정 class, id명을 붙여서 원하는 스타일을 적용할 수 있다.

<style>
  .mg-10 {
    margin: 10px;
  }
  .yellow {
    background-color: yellow;
  }
</style>
...
<div class="mg-10 yellow"></div>

 

이렇게 style 태그 안에 넣어둔 class명을 활용하면 여러 클래스를 사용할 수도 있다.

 

그러나 리액트에서는 class를 사용하지 않고 JSX문법으로 className을 활용한다.

return (<div className="mg-10 yellow"></div>);

 

일반 HTML처럼 style 태그 안에 넣어둔 class명을 사용하기도 하지만, 보통 styled-component와 module css를 주로 비교해서 사용한다.

 

그러나 이 글의 주인공은 이 둘이 아니라 classnames이므로, module css만 간단히 소개하고 활용법을 소개하겠다.

 

---

CSS Module

일반 css와 달리 각 css 파일을 컴포넌트 단위로 import하여 사용한다.

즉 특정 css 파일에서 정의한 스타일링이 다른 생뚱맞은 파일에서 적용될 일이 없는 것이다.

 

보통 css 스타일링에서는 css가 광범위하게 적용되다보니 .button 같은 전역적인 class명을 사용하는 것을 유의하게 되는데, css module은 각 css 파일마다 .button이 있어도 스타일링이 겹치지 않게 적용된다는 것이 가장 큰 장점이다.

 

각 css 파일명에 .module을 넣어서 사용할 수 있다. (Button.module.css) import할 때도 물론 저 파일경로로 해야 한다.

import styles from 'src/css/Button.module.css'
...
return (<div className={styles.yellow}></div>);

 

다만 가장 큰 단점은 동적 스타일링에 있다.

 

isValid 값에 따라 yellow나 red를 class명으로 사용해야 하는 경우 코드가 복잡해지기 때문이다.

...
return (<div className={`${styles.always} ${isValid ? styles.yellow : styles.red}`}></div>);

 

이 큰 단점을 상쇄해주는 것이 바로 classnames 모듈이다.

 

---

classnames

우선 classnames 모듈을 사용하기 위해서는 모듈을 설치해야 한다. 터미널에서 다음 명령어를 입력하자.

npm install classnames
yarn add classnames

npm install --save @types/classnames

 

npm을 사용하는 사람은 첫 번째 줄을, yarn을 사용하는 사람은 두 번째 줄을 사용하면 된다.

별도로 typescript를 사용하는 경우 type을 설치하기 위해 세 번째 줄 코드도 실행하도록 하자.

 

이렇게 설치만 하면 css module에서 동적 스타일링도 아주 간단해진다!

import styles from "./App.module.css";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

function App() {
  return (
    <div className={cx("App", { styleName: isValid })}>
      <div className={cx("yellow")}>hello</div>
      <div className={cx("mg-10","red")}>world!</div>
    </div>
  );
}

export default App;

 

 

우선 안쪽에 있는 div 2개를 보면, 위쪽 div는 yellow라는 class명을 활용한 것이 보인다.

아래쪽 div는 mg-10과 red의 class명을 모두 사용했는데, 백틱(`) 없이 간단하게 이름을 넣어주는 것만으로도 여러 개의 class명을 사용할 수 있어 훨씬 간단해졌다.

 

마지막으로 제일 바깥쪽 div를 보면 cx("App", {styleName : isValid})라고 되어 있는데,

이는 App이라는 class명은 항상 활용하고, styleName이라는 class명은 isValid 값이 true일 때만 활용한다는 뜻으로 아주 간단하게 동적 스타일링을 추가할 수 있다!

 

classnames 모듈이 css module의 단점을 크게 상쇄하여 코드가 매우 간편해지기 때문에,

css module을 사용하여 스타일링해보고 싶은 사람들은 이 조합을 활용해보기를 추천한다.