classnames 사용법

classnames 모듈은 html요소에서 클래스를 조건부로 넣거나 빼줄때 따로 조건문 필요없이 쉽게 작성하게 해주는 라이브러리다
만약 내가 돈이 있을때만 'can-buy' 라는 클래스명을 추가하고, 돈이 없을때는 클래스를 빼고 싶다면 아래와 같이 조건문을 사용해서 클래스를 추가하는 방법을 사용할 수 있지만

export default Tok  = () => {
  let hasMoney = true;
  const myClasses = [sleepy, hungry];

  if (hasMoney) {
      myClass.push('can-buy');
  }

  return (
      <div classname={myclasses.join(' ')}>
          <h2>Hello Tokkissi</h2>
      </div>
  )
}

classnames 라이브러리를 사용하면 자바스크립트 조건문을 사용하지 않고도 같은 의미를 말할수 있다. 아래와 같이 사용 가능하다

일단 npm 이나 yarn으로 라이브러리 설치부터 하고, import 해오자 (네임즈다 s 꼭 붙이자)

npm install classnames


yarn add classnames

// cn 대신에 아무거나 별칭을 넣어도 된다. classnames 나 cn 을 쓰는 분들이 많지만, 그저 변수명같이 사용하는 별칭일뿐이다
import cn from 'classnames';

export default Tok  = () => {
  let hasMoney = true;
  const myClasses = cn('sleepy', 'hungry', {
      'can-buy': hasMoney === true,  // 명시적 설명을 위해 굳이 === 을 써주었지만... 알죠?
  })

  return (
      <div classname={myclasses}>
          <h2>Hello Tokkissi</h2>
      </div>
  )
}

사용법을 정리해보자면

1. 라이브러리로 불러온 cn의 괄호 안에 기본 보유 클래스명들을 적자
2. 조건에 따라 보일 클래스는 객체에 key 로 넣자
3. 보일 조건은 value 값이 true 일때 이다

 

완성! 조건문 없이도 조건에 반응하는 클래스명을 완성하였다!