# Style Basics

## className

> JSX 구문에서 태그에 class 명을 추가할 때 class' 대신 'className'을 사용한다.

jsx구문은 html과 비슷해보이지만 실제로는 js코드이다. 

js에서 `class`는 이미 클래스를 만들기 위한 예약어로 사용되고 있으므로 jsx에서 `class` 대신 `className`을 사용한다.

### classNames

> react에서 자주 사용되는 class 명 관련 유틸리티 라이브러리 
>
> class 명을 조건부로 추가하거나 제거하는 등의 작업을 쉽게 해줌

```typescript
declare function classNames(...args: classNames.ArgumentArray): string;
```

1. classNaems 함수는 문자열 또는 객체 형식의 여러 인자를 받을 수 있다.
2. 문자열인 경우 클래스 명을 그대로 반환
3. 객체는 클래스 명을 조건부로 추가하기 위해 사용됨
4. key가 클래스 명이 되고, value가 truthy(참같은 값) 일 때만 추가된다.

#### Install

```bash
npm i -D classnames
```

#### Usage

<pre class="language-tsx"><code class="lang-tsx">import cn from 'classnames';

return (
  &#x3C;button
    className={cn("btn-base", {
<strong>      [cn(
</strong>        ButtonVariantClassName.default,
        ButtonVariantClassName.hover,
        ButtonVariantClassName.focus,
      )]: !disabled, 
    })}
  >
    Button
  &#x3C;/button>
);
</code></pre>