ReactJS/Component.module.css

App을 개발하다보면 당연히 수많은 컴포넌트를 만들게 된다. 버튼만 해도 정해진 디자인 컨셉 아래 배경색과 글자색이 다르다던지 하는 등 여러 종류의 styles를 적용할 수 있어야 한다.

그때 create-react-app으로 생성한 React App에서 module.css를 사용하면 CSS코드를 JavaScript 오브젝트처럼 사용할 수 있다.

예를 들어
create-react-app으로 생성한 애플리케이션에 src 폴더를 보면 기본적으로 App.js와 index.js가 있는 걸 확인할 수 있다.

내가 여기에 Button 컴포넌트를 만들고 싶다면,
Button.js라는 새로운 파일을 만들고

import PropTypes from "prop-types";

function Button({ text }) {
  return <button>{text}</button>;
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

이렇게 간단하게 작성해준다.

이제 CSS를 적용하고 싶다면
Button.module.css라는 파일을 만들고

.btn {
  color: white;
  background-color: tomato;
}

이처럼 간략한 Style를 만들어준다.

그리고 나서 Button.js 컴포넌트에 Button.module.css를 import해온 후, JavaScript 오브젝트로 사용해준다.

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({ text }) {
  return <button className= {styles.btn}>{text}</button>;
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Sweeeet!

html을 inspect해서 보면
우리가 편하게 정해진 이름의 style을 여러번 다른 곳에 적용하더라도 실제로는 random classname을 만들어 적용해준다.

매번 classname이 겹치지 않게 하려고 애쓸 필요가 없다.
설령 어쩌다 Button.module.css에 'btn'이라는 classname을 사용하고 새로운 컴포넌트를 위한 module.css에 또 'btn'을 classname으로 사용해 적용하더라도 문제가 되지 않는 다는 것!

덕분에 컴포넌트를 위한 CSS를 만들고 독립된 개체로 사용할 수 있다는 것이다.

Coooool!