[React] classnames

📍 classnames
CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리. CSS Module을 사용할 때 이 라이브러리를 사용하면 여러 클래스를 적용할 때 매우 편리하다.

이를 사용하기 위해서는 해당 라이브러리를 설치해야 한다.

$ yarn add classnames

• classnames의 기본적인 사용법

classNames('one', 'two'); // = 'one two'
classNames('one', { two: true }); // = 'one two'
classNames('one', { two: false }); // = 'one'
classNames('one', ['two', 'three']); // = 'one two three'
 
const myClass = 'hello';
classNames('one', myClass, { myCondition: true }); // = 'one hello myCondition'

이처럼 여러 가지 종류의 파라미터를 조합해 CSS 클래스를 설정할 수 있어 컴포넌트에서 조건부로 클래스를 설정할 때 매우 편리하다. 예를 들어 props 값에 따라 다른 스타일을 주기가 쉬워진다랄까?

• 예시 코드

const MyComponent = ({ highlighted, theme }) => (
  <div className={classNames('MyComponent', { highlighted }, theme)}>Hello</div>
);

이렇게 하면 위 엘리먼트의 클래스에 highlighted 값이 true면 highlighted 클래스가 적용되고, false면 적용되지 않는다. 추가로 theme으로 전달받는 문자열은 내용 그대로 클래스에 적용된다.

이런 라이브러리의 도움을 받지 않는다면? 아래와 형식으로 처리해야 한다.

• 라이브러리 적용 X

const MyComponent = ({ highlighted, theme }) => (
  <div className={`MyComponent ${theme} ${highlighted ? 'highlighted' : ''}`}>
    Hello
  </div>
);

둘을 비교하면 classnames를 쓰는 것이 가독성이 높다는 것을 알 수 있다.

또한 CSS Module과 함께 사용하면 CSS Module 사용이 훨씬 쉬워진다. classnames에 내장되어 있는 bind 함수를 사용하면 클래스를 넣어 줄 때마다 styles.[클래스 이름] 형태를 사용할 필요가 없다. 사전에 미리 styles에서 받아 온 후 사용하게끔 설정해 두고 cx('클래스 이름', '클래스 이름2') 형태로 사용할 수 있다.

• 아까 만든 CSSModule 컴포넌트에 classnames의 bind 함수를 적용한 예

import classNames from 'classnames/bind';
import styles from './CSSModule.module.css';
 
const cx = classNames.bind(styles); // 미리 styles에서 클래스를 받아 오도록 설정하고
 
const CSSModule = () => {
return (
  <div className={cx('wrapper', 'inverted')}>
    안녕하세요, 저는 <span className="something">CSS Module!</span>
    </div>
);
};
 
export default CSSModule;

❓🤔 classnames의 bind를 사용하면?
CSS Module을 사용할 때 클래스를 여러 개 설정하거나 조건부로 클래스를 설정할 때 lassnames의 bind를 사용하면 훨씬 편리하게 작성할 수 있다.