classnames?

classnames는 이번 Asssignment를 하면서 유용하게 잘 사용하였기에 정리를 해보자 한다.

classnames는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리이다. 또한, CSS Module을 사용할 때 이 라이브러리를 사용하면 여러 클래스를 적용할 때 매우 편리하다.
라이브러리이기 때문에 설치가 필요하다.

$ yarn add classnames

일단 기본적인 사용법을 알아보자.

classnames 간략 사용법

import classNames from ‘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으로 전달받는 문자열은 내용 그대로 클래스에 적용된다.

그렇다면 classnames 라이브러리를 사용하지 않고 작성해보자

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

확실히 classnames를 쓰는 것이 훨씬 가독성이 높다.

CSS Module과 classnames

이 부분은 사용해보지는 않았지만, 함께 사용하면 좋다고 하여 추가적으로 내용만 정리해보았다.

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

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