230622 react에서 module css 사용하기

230622 react에서 module css 사용하기

react 컴포넌트에서  '컴포넌트명.css'를 통해 스타일을 관리하고 있다가
module css를 사용하면 클래스가 겹칠 위험이 줄어든다는 피드백을 받아 module css로 모두 변경하기로 했다.

 

 

 

module css  장점과 일반적인 사용법

• 다른 css 파일과 독립적으로 동작하여 충돌할 위험이 적다.
• 컴포넌트 별로 클래스 명을 정하기 때문에 짧은 이름으로 편하게 사용할 수 있다.

.css 파일 확장자를 module.css로 변경

/* Button.module.css */
.button {
...
}

 

module.css를 styles로 import

import styles from './Button.module.css'

const Button = () => {
  return (
    <button className={styles['button']}>
    </button>
  )
}

 

클래스 여러 개 적용

문자열 템플릿 ``를 사용하여 클래스 명을 합칠 수 있다

...
<button className={`${styles['button']} ${styles['button--fill']}`}>
</button>
...

 

클래스 지정할 때 유의사항

기본적으로 .(점)을 이용한 클래스 명과 [](대괄호)를 사용한 클래스 명 모두 가능하지만

.(점)을 이용한 클래스 명은 -(하이픈)기호가 있을 경우 제대로 인식하지 못한다.

<button className={styles['button']}></button> // O
<button className={styles.button}></button> // O
<button className={styles['button--fill']}></button> // O
<button className={styles.button--fill}></button> // X