// 아래 className 부분이 지저분하다. className 의 사용을 개선해주는
// Lib 가 있다. classNames

// Button.jsx
import React from 'react';
import styles from './Button.module.css';

class Button extends React.Component {
  state = {
    loading: false,
  };

  render () {
    return(
      <button 
        onClick={this.startLoading} 
        className={
          this.state.loading 
            ? `${styles['button']} + ${styles['loading']}` 
            : styles['button']
        } 
        {...this.props} 
      />
    );
  }

  startLoading = () => {
    this.setState({
      loading: true,
    });
    setTimeout(() => {
      this.setState({
        loading: false,
      });
    }, 1000);
  }
}

export default Button;

==============================================
// Button.modules.css
.button {
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
}

.loading {
  border: 2px solid grey;
  color: grey;
}

import styles from "./App.module.css";
import Button from './components/Button';

function App() {
  return (
    <div className={styles['App']}>
      <header className={styles['header']}>
        <img src={logo} className={styles['logo']} alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Button>Button</Button>
      </header>
    </div>
  );
}

export default App;

classnames Lib