CSS Module

리액트에서 컴포넌트 스타일링을 할 때 CSS Module를 사용하면 className 중복을 방지할 수 있습니다

CSS Module를 사용할 땐 .module.css 으로 작성합니다

//Button.module.css

.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 2rem;
  }

이렇게 만들어놓은 박스가 있다고 가정해봅시다

임포트를 해서 불러오는건 맞지만 약간의 방식의 차이가 있습니다

원래대로라면 이런식으로 작성하죠

import "./Button.scss";

하지만 CSS Module를 불러올 땐 이렇게 작성합니다

import styles form "./Button.module.css";

이렇게 되면 css에 적혀져있는 Button이라는 클래스 이름이 "고유화"가 됩니다

고유화가 되면 파일이름, 경로이름, 해시값 등이 고유화가 되며 이름이 들어가있는 객체를 불러올 수 있게됩니다

function Button() {
    return <div className={styles.Button}>{styles.Button}</div>
}

가리키고 있는 방향이 기존 Button 방향의 고유화된 이름을 가리키게 됩니다

진행 도중 리액트 프로젝트에 참여해서 추가 기능을 넣을 떄 클래스명이 중복되면 의도치 않은 값이 나올 수 있으니

이에 대비하여 CSS Module를 사용하면 기존에 만들었던 클래스와 중복되지 않습니다