module css, classnames로 조건부 스타일링

classnames는 조건부로 스타일링을 편하게 할 수 있는 라이브러리이다.

{클래스명 : 조건식}

형태로 조건식이 참일 경우 클래스명을 추가할 수 있다.

 

 

공식 문서 예제를 몇가지 살펴보자.

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

 

 

기본 형태 {클래스명 : 조건식} 의 형태이나 조건식 생략이 가능하며 그 경우에는 true이다.

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

 

 

템플릿 리터럴을 사용할 수 있다. (당연하게도)

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });

 

 

특정 조건에서 기존에 적용되던 class값을 없앨 수 있다.

classNames('foo', { foo: false, bar: true }); // => 'bar'

 

 

이제 modules css와 bind를 활용한 막강한 패턴을 소개해보겠다.

 

css가 다음과 같을 때

my.module.scss

.item {
    width: 100%;
    height: 100px;
    border: 1px solid lightgray;
}

.item_highlight {
    @extend .item;
    background-color: lightgrey;
}

 

 

특정 변수(조건)에 따라 className을 추가해줄 수 있다.

my.tsx

...
import classnames from 'classnames/bind'; // bind!

import styles from './my.module.scss';

const cn = classnames.bind(styles);
...

...

return (
	<div
	  className={cn({
	    item: true,
	    item_highlight: isHighlight
	  })}
	>
	  <span>item</span>
	</div>
)
...

 

 

한결 편하게 조건부 스타일링을 할 수 있을 것 같다.