[ReactJS] CSS Module 작성하기

이번에는 React 에서 사용하는 CSS Module 에 대해 알아보자.

여러 사람들과 협업을 하다 보면 css 충돌이 나는 경우가 잦았어서 클래스 이름을 적을때 충돌이 나지 않도록 머리를 쥐어짜 클래스 이름을 지었던 적이 많았다.

CSS Module 은 이러한 문제를 해결하기 위해, 각 파일 내에서 정의된 클래스 또는 스타일을 해당 파일 내에서만 사용할 수 있도록 만들어 준다.

✨ 사용법

1. css 파일 이름에 .module.css 를 붙여서 관리해준다.

2. import를 할 때에는 styles 를 붙여준다. 
3. style을 넣고자 하는 class 앞에 styles.를 붙여준다.

import styles from "./Hyunmer.module.css";

const Hyunmer1 = () => {
  return (
    <div className={styles.title_container}>
      <h3>Title</h3>
    </div>
  );
};

export default Hyunmer1;

이렇게 CSS Module 를 사용하여 클래스 이름이 충돌하는 것을 방지하고 다른 사람들과 함께 하는 프로젝트에서 보다 안전하게 관리를 할 수 있다.