클래스명 충돌 css-module로 해결하기

React로 프로젝트를 만들던 도중에 style을 준 적이 없는데 이상하게 화면이 보인 적이 있었습니다.

찾아보니 컴포넌트끼리 같은 클래스명을 사용하면 충돌이 일어난다고 하네요..

그래서 이를 해결할 방법을 찾아보니 css-module을 사용하면 충돌을 막을 수 있다고 합니다!!

 

css-module 사용하기

/*  주의!!  */
/* React에서 css-module을 사용할 땐, 클래스명을 abc-efg 하면 안되고 abcEfg 로 지어야 오류가 안 생긴다. */

.itemsList {
  background-color: #E67E22;
  margin: 0 auto;
}

.item {
  color: #ffffff;
  font-size: 18px;
}

import style from './style.css';

function App() {
  return (
    <ul className={`${style.itemsList`}>
      <li className={`${style.item}`}>홈</li>
      <li className={`${style.item}`}>레시피</li>
      <li className={`${style.item}`}>나눔/신청</li>
      <li className={`${style.item}`}>채팅</li>
      <li className={`${style.item}`}>마이페이지</li>
    </ul>
  );
}

 

css-module 작성하는 법

- {`${CSS명.클래스명}`}

 

css-module 단점

- 코드를 작성하기 번거롭고, 가독성이 좋지 못합니다.

 

이를 해결하기 위해 classnames 패키지를 사용하면 됩니다!

패키지를 사용하기 위해 아래와 같이 터미널에 명령을 입력해주세요.

npm i -S classnames

 

 

import style from './style.css';
import cn from 'classnames';

function App() {
  return (
    <ul className={cn(style.itemList)}>
      <li className={cn(style.item)}>홈</li>
      <li className={cn(style.item)}>레시피</li>
      <li className={cn(style.item)}>나눔/신청</li>
      <li className={cn(style.item)}>채팅</li>
      <li className={cn(style.item)}>마이페이지</li>
    </ul>
  );
}

classnames로 css-module 작성하는 법

- {classnames명(CSS명.클래스명)}

 

clssnames 장점

- classnames 패키지 덕분에 코드 작성하기 간단해졌고 이해하기 더 쉬워졌습니다.

 

 

앞으로 컴포넌트를 여러 개 만들 땐 꼭 css-module을 사용해야겠습니다.