Style Basics

className

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

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

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

classNames

react에서 자주 사용되는 class 명 관련 유틸리티 라이브러리

class 명을 조건부로 추가하거나 제거하는 등의 작업을 쉽게 해줌

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

1. classNaems 함수는 문자열 또는 객체 형식의 여러 인자를 받을 수 있다.

2. 문자열인 경우 클래스 명을 그대로 반환

3. 객체는 클래스 명을 조건부로 추가하기 위해 사용됨

4. key가 클래스 명이 되고, value가 truthy(참같은 값) 일 때만 추가된다.

Install

npm i -D classnames

Usage

import cn from 'classnames';

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