css-module

리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스의 충돌을 막을 수 있다.

 

CRA 로 만든 프로젝트에서 CSS Module 를 사용 할 때에는, CSS 파일의 확장자를 .module.css 로 하면 된다.

 

예를 들어보자.

 

 

Box.module.css 

.box {
  background: blueviolet;
  color: white;
  padding: 3rem;
  width: 300px;
  text-align: center;
}

위와 같이 css 파일을 만들어준다.

 

 

Box.js

import React from "react";
import classes from "./Box.module.css";

const Box = () => {
  return <div className={classes.box}>Div Box</div>;
};

export default Box;

 

2번째줄 처럼 import 해주면 되는데 보통 이름은 classes나 styles를 많이 사용한다고 한다.

className = {classes.클래스명} 형식으로 적용해주면 된다.

 

 

 

개발자 도구를 살펴보면 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에 충돌날일을 걱정 하지 않아도 된다.

 

 

 

 

결과는 이렇게 나온다.