[next.js] style.module.css 사용

CSS는 다음과 같이 클래스명에 매핑시켜서 사용한다.

// .tsx
import './style.css'

<div className='main'>

// .css

.main {
	display: flex;
}

 

이는 정석적이고 쉽고 간편한 CSS의 사용법이다.

그런데 리액트같이 컴포넌트형 구조를 가지고 있다면 클래스 명의 충돌이 일어날수 있다.

 

button-text 이라는 이름의 컴포넌트가 존재한다고 할때, 다른 페이지에 같은 이름의 button-text라는 클래스명을 가진 엘리먼트가 존재한다면, 여기서 css의 충돌이 일어나게 된다.

 

재사용을 위해 컴포넌트화 한 클래스의 경우 더이상 그 내부를 신경쓰지 않기 때문에 중복되는 이름이 발생활 확률이 높다.

이를 방지하기 위해서 컴포넌트형 클래스 명 앞이나 뒤에 추가적인 이름을 붙여서 이러한 충돌을 피할수 있다.

하지만 매번 새로운 클래스 이름을 지어야 하기 때문에 이 부분은 CSS를 사용하며 여간 불편한게 아니다.

 

next.js에서는 xxx.module.css 라는 형태로 css 파일을 생성하면 이를 객체에 매핑하여 클래스에 할당할 수 있다.

웹페이지 빌드시 자동으로 클래스 이름을 변환해주기 때문에 중복을 방지할수있다.

import styles from './style.module.css';

const Logo = (): ReactElement => {
  return (
    <div className={styles.logo}>
    </div>
  )
}

 

웹페이지에는 다음과 같이 표기된다.

<div class="style-module__AWT5gW__logo"></div>