CSS 모듈을 사용한 스타일 적용

여러 사람과 프로젝트를 진행하다 보면 클래스 이름이 겹치는 경우가 발생할 수 있습니다.

 

이때 유용하게 사용할 수 있는 것이 CSS 모듈입니다.

 

CSS 모듈 사용 전

기존에는 CSS 파일 확장자를 css를 사용하여 파일을 만들어 주었습니다.

 

 

CSS 모듈 사용 

CSS 모듈을 사용하기 위해서는 CSS 파일을 위의 이미지와 같이 파일 이름 뒤에 .module.css를 붙여 만들어줍니다.

 

 

 

CSS 모듈 사용 전

import "./CourseInput.css"

기존에는 CSS 파일을 위와 같이 import 해주었습니다.

 

 

CSS 모듈 사용 

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

CSS 모듈을 사용하기 위해서는 위의 코드와 같이 import를 해줍니다.

 

import 뒤에 styles 위치에는 원하는 이름을 사용해주시면 됩니다.

 

 

 

마지막으로 컴포넌트 className에 클래스만 설정해주시면 됩니다.

<div className={styles["form-control"]}>

상단에서 CSS 파일을 원하는 이름을 사용하여 import 해주었습니다.

 

해당 이름을 이용하여 대괄호 안에  "클래스 명" 형식으로 설정해주시면 됩니다.

CSS 모듈을 사용하면 위의 이미지처럼 클래스 명을 정해주게 되어 여러 사람과 프로젝트 진행 시 클래스 명이 겹치는 일을 방지할 수 있습니다.