console.log(classNames({ foo: true }, { bar: false})); // foo

key값이 true 일 때만 key 가 class 로 들어오냐 마냐를 결정한다.

console.log(classNames(null, false, 'class', 0, 1, { foo : null}, ""));
// class 1

falsy 한 값은 모두 쳐낸다.

className={
	this.state.loading 
	? `${styles['button']} + ${styles['loading']}` 
	: styles['button']
} 

--->
className={
          classNames(styles['button'], { loading: this.state.loading})
}

그렇지만 여기에서 className 은 그냥 loading 이 된다. hash 값이 안붙은...
따라서 추가적인 작업이 필요하다.

<https://github.com/JedWatson/classnames> // Alternate bind version (for css-modules)
let cx = classNames.bind(styles);
console.log(cx('button', 'loading')); // hash 값을 포함해서 return 된다.

// 한줄로 줄였다.
render () {
    const {loading} = this.state;
    return(
      <button 
        onClick={this.startLoading} 
        className={
          classNames(cx('button', { loading }))
        }
        {...this.props} 
      />
    );
  }

scss 또한 똑같다. 여태 한 작업의 css를 모두 scss 로 바꿔주기만 하면 똑같이
동작한다.