[React] 09. css module 사용하여 스타일 적용해보기

이번에 프로젝트를 진행하면서 css module을 사용하여 스타일을 적용하고 있는데요! 간단하게 css module이 무엇인지 어떻게 사용하는지 정리해보려고 합니다.

💚 CSS Module 란!

css 클래스의 이름을 고유하게 만들어 클래스명이 중첩되는 것을 막아주는 기술
확장자로 .moudule.css을 사용

💛 CSS Module 적용해보기!

먼저 아래와 같이 css module파일을 생성하여 줍니다.

그리고 만들어진 파일에 container라는 이름의 클래스를 추가해주었습니다. 간단하게 배경색만 지정해주도록 하였습니다.

.container {
    background: #dda0dd;
}

그리고 app.js 에서 만들어준 css를 적용해줄거에요! 스타일을 적용하기 위해서는 styles객체안에 값을 참조하여야 합니다. 아래와 같이 styles.클래스이름을 사용하여 불러올 수 있어요!

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

function App() {
  return (
    <div className={styles.container}>
      <h1>CSS MODULE</h1>
    </div>
  );
}

export default App;

👉 클래스 이름에 -(하이픈)이 포함되어 있는 경우

클래스 이름에 -이 포함된 경우에는 styles[`class-name`]과 같이 사용해야합니다.

.container-title {
    color : #db7093;
    font-weight: bold;
    text-align: center;
}

위와 같이 container-title이라는 이름의 css 클래스를 사용하기 위해서는

<h1 className={styles[`container-title`]}>CSS MODULE</h1>

다음과 같이 클래스를 적용시켜주어야 합니다.

오늘은 간단하게 css module을 사용하는 방법을 정리해보았는데요!

💡 느낀점

이번에 css module을 사용하여 스타일링을 하는 과정에서 기존에 사용하던 styled-components와 비교해보았다.
styled-components를 사용하면 className을 사용하지 않아도 바로 적용할 수 있다는 점과 props에 따라 조건을 바로바로 줄 수 있던 점이 좋았는데..!
물론 css module로 스타일을 적용했을 때 클래스 이름을 고유하게 사용할 수 있다는 장점이 있었지만 아직 잘 모르겠다. 이번에 css-in-css와 css-in-js에 대해 다시 한번 공부해봐야겠다.