[React] 여러 클래스명을 지정하는 라이브러리 classnames

className 속성에 대한 스타일 지정은 매우 간단하지만, ‘고정 스타일과 선택 스타일이 혼재된 경우’, ‘선택해야 할 스타일이 여러 개에 걸쳐 있는 경우’에는 {…} 표현식이 복잡해지기 쉽다는 문제가 있다.

이러한 번거로움을 피하기 위해 classnames라는 라이브러리를 도입하는 것이 좋으며, classnames 라이브러리는 터미널에서 다음 명령어로 설치할 수 있다.

npm install classnames

https://github.com/JedWatson/classnames

import React from 'react';
import cn from 'classnames';

export default function Button (props) {
  return (
    <button
      className={cn('foo', 'bar')}
    >
      클릭
    </button>
  );
}

사용법은 classnames 라이브러리에서 가져온 cn 함수에 적용할 스타일 클래스 이름을 나열하기만 하면 된다. 해 공백이 빠지는 등의 문제가 발생하지 않아 코드를 작성하기가 훨씬 수월해졌다.

또한, 문자열과 객체를 혼합한 다음과 같은 서술도 가능하다.

import    React     from    'react';
import cn from 'classnames';

export default function Button (props) {
    return (
        <button
            className={cn(
                'foo',
                {
                    light: mode === 'light'
                    dart: mode === 'dark'
                }
            )}
        >
            클릭
        </button>
    );
} 

객체는 ‘스타일명: boolean 값’ 형식으로 표현하여, 값이 true인 스타일만 적용한다는 의미다. 여러 스타일을 각각 분기별로 켜고 끌 때 유용한 구문이다.

또는 다음과 같이 문자열/배열/객체의 혼합도 가능하다.

import    React     from    'react';
import cn from 'classnames';

export default function Button (props) {
    return (
        <button
            className={cn(
                'foo',
                [
                    'bar',
                    {
                        light: mode === 'light'
                        dart: mode === 'dark'
                    }
                ]
            )}
        >
            클릭
        </button>
    );
} 

이 예시에서는 중첩된 배열이 평탄화되어 ‘foo bar light’와 같은 속성 값이 생성된다.

이처럼 classnames 라이브러리를 이용하면 className 값 생성의 표현력이 향샹되므로 className 속성의 분기로 인해 코드가 복잡해졌다고 생각되면 도입을 고려해볼 수 있다.

 

참고: 따라하며 쉽게 배우는 모던 리액트 완벽 입문