classNames

1. classNames?

• 리액트에서 class 이름을 편하게 쓰기 위해 만들어진 라이브러리

  • className을 여러개 사용 가능

  • 조건에 따라서 className을 부여하고 싶을 때 사용 가능

    💡 className을 한 개 사용하고 특정 조건에 따라서 className을 주는 것이 아니라면 classNames를 굳이 사용할 필요는 없다.

2. 사용법

2-1. import

import cx from "classNames"

2-2. className 여러개 사용하기

<div className={cx('class1','class2')}></div>

2-3. className 조건부 사용

<div className={cx({'class1': state})}></div>

3. PostCSS와 함께 쓰기

3-1. CSS Module의 특징

• style={styles.title} 이라고 써주면 webpack에서 자동으로 class=”난수화된 클래스 이름”으로 이름을 난수화시킨다.

3-2. PostCSS와 classnames

• 옳바른 방식

  • 클래스 이름이 한 개일 때는 굳이 classnames 라이브러리를 쓸 필요는 없다.

    // class 1개 적용
    className={styles.title}
    
    // class 1개 이상 적용
    className={cx(styles.title, styles.bold)}
    
    // class 1개 이상 적용 + 조건부 적용
    className={cx(styles.title, styles.bold, { [styles.show]: isShow })}

• 주의할 방식

  • 아래와 같은 방식으로 사용할 경우 styles.을 안붙여도 된다는 장점이 있을 수 있다.
  • 하지만 난수화 안된 클래스명을 classnames 안에 집어 넣어 글로벌하게 사용하고자 할 때 쓸 수 있는 방법이 없을 수 있다.
  • 정확히 말하자면 방법은 있지만 가독성을 해칠 수 있다.

  const cx = classNames.bind(styles)
  style = {cx('title','title2')}           // 이렇게 난수화 안된 클래스 이름으로 작성할 수 있다.
  style = {cx('global', '다른 클래스 이름')} // 하지만 이렇게 작성할 때 글로벌 클래스명으로 사용할 'global'마저 bind된 곳에서 찾기 때문에 이런 경우 문제가 생길 수 있다.
  style={cx('global', styles.title)}      // 글로벌 클래스 명으로 사용할 파일만 이런 식으로 작성할 수도 있다. 하지만 모든 파일의 형식을 통일하지 않아 가독성이 떨어질 수 있으니 어떻게 사용할 지 한 번 고민해보는 것도 좋다.