React classnames 모듈 사용하기

classNames는 CSS 클래스를 조건부로 설정할 때 매우 유용한 모듈입니다.

classNames 모듈은 여러 클래스를 추가할 때뿐만 아니라, 특정 값이 true/false임에 따라 클래스명을 추가하거나, 추가하지 않도록 하는 것을 간단히 구현할 수 있게 해 줍니다.

그렇다면 사용 방법을 알아볼까요?

classnames 설치

npm install classnames

classnames 기본 사용법

const MyComponent= () => {
    
    // 결과 : "one two three"
    return <div className={classNames("one, two, three")}>Hello</div>
};

위 소스만 보면 일반 className을 작성하는 것과 비교해서 이점을 찾아볼 수 없죠?

그렇다면 className에 조건식을 추가해서 classNames를 이용한 것과 비교해 볼까요?

 

 

일반 ClassName 사용

const MyComponent= () => {
		const two: boolean = true;
    const three: boolean = false;
    const fourClassName: string = "four";
    
    // 결과 : "one two four"
    return 
	    <div className={`one ${two ? "two" : ""} ${three ? "three" : ""} ${fourClassName}`}>
	      Hello
      </div>
};

 

ClassNames 사용

const MyComponent= () => {
		const two: boolean = true;
    const three: boolean = false;
    const fourClassName: string = "four";
    
    // 결과 : "one two four"
    return <div className={classNames("one", { two, three }, fourClassName)}>Hello</div>
};

 

two와 three값이 true이면 ‘two, three’ 값이 클래스명으로 추가되고 fourClassName값이 클래스명으로 지정됩니다.

두 방법을 비교해 보니 classNames를 사용하는 것이 좀 더 심플하고 직관적이죠?

몇 가지 예시를 사용 예시를 더 가져와볼게요

 

 

classNames('one', 'two'); // = 'one two'
classNames('one', { two: true }); // = 'one two'
classNames('one', { two: false }); // = 'one'
classNames('one', ['two', 'three']); // = 'one two three'
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

const myClass = 'hello';
classNames('one', myClass, { myCondition: true }); // = 'one hello myCondition'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

 

 

 

참고

https://www.npmjs.com/package/classnames