react에서 css module로 다른 클래스와의 스타일이 충돌되는 것 방지하기

리액트에서 css 파일을 사용하면, 종종 해당 css파일의 스타일이 다른 컴포넌트의 요소에 적용되는 문제를 마주하게 된다.

이러한 문제를 해결하기 위해 styled-component를 사용하는 방법도 있지만, 내 경우는 css 형태를 유지해야 하는 이유가 있었기 때문에 간단하게 css module을 사용하기로 했다.

 

css 모듈을 사용하면, 클래스 이름이 고유하게 변환되어, 같은 이름을 가진 클래스들 간의 충돌을 방지할 수 있다.

아래는 기존 css를 css 모듈로 변경하는 방법이다.

 

 

 

 

1. css파일 이름을 css모듈에 맞게 변경한다.

 

예를 들어 chatpopup.css가 기존 css이름이라면, 이름과 css 사이에 'module'을 넣어 다음과 같이 변경해야 한다.

chatpopup.moule.css

 

 

 

2. 해당 모듈은 다음과 같이 import한다.  

import styles from "./ChatPopup.module.css"

 

 

이 때 styles는 임의로 사용한 객체 이름이다. 

 

 

 

3. className은 css모듈을 임포트 할 때 사용했던 객체(styles)를 붙여 사용한다.

<div className={styles.chatHeader}>

 

 

이렇게 하면, `chatHeader` 클래스는 고유한 이름을 가지게 되어 다른 파일의 CSS와 충돌하지 않게 된다.

이 때 기존에 className이 snake_case로 되어 있다면 camelCase로 변경해야 한다.

그런데 나는 기존에 snake case로 열심히 작성해놨기 때문에, 그냥 대괄호 표기법을 사용하기로 했다.

 

참고로, 대괄호 표기법은 속성의 이름이 문자열이고, 유효한 식별자 규칙을 따르지 않는 경우(예: 공백, 하이픈, 특수 문자가 포함되어 있거나 숫자로 시작하는 경우) 또는 속성의 이름이 동적으로 결정되는 경우에 사용할 수 있다.

 

 

 

 

위와 같은 방법으로 변경하면, 이 react 컴포넌트에서 정의한 스타일은 다른 컴포넌트의 스타일과 더이상 충돌하지 않게 된다.