classnames 사용하여 조건부 스타일 지정하자!

저는 Tailwind를 이용해 웹페이지를 구현할 때
동적인 스타일링을 구현하기 위해서 종종 삼항 연산자를 사용해왔습니다.
하지만 이 방법은 코드가 너무 지저분해진다는 문제가 있었습니다.
오늘은 그 문제를 해결해 줄 수 있는 classnames 라이브러리를 소개해 드리겠습니다.

---

❓ classnames란?

classnames 라이브러리는 조건부로 CSS 클래스를 적용할 수 있게 해주는 JavaScript 라이브러리입니다.

여러 개의 CSS 클래스를 간편하게 결합하거나 특정 조건에 따라 클래스 이름을 동적으로 추가할 수 있습니다.

Tailwind 또는 CSS Modules와 많이 쓰인다고 합니다.

장점

• 코드 가독성이 높아집니다.
• 동적 스타일 적용이 쉬워집니다.
• 라이브러리 크기 작아집니다.

단점

• 기본적으로 타입이 정해져 있지 않아서 TypeScript 환경에서 사용 시 타입 정의를 추가해야 합니다.
• 추가 설치 해야 합니다.

---

🎯 사용법

저는 오늘 tailwind와 같이 사용해보겠습니다.

npm i classnames

먼저 라이브러리를 설치해줍니다.

import React, { useState } from 'react';
import classNames from 'classnames'; // classnames 라이브러리 import

export function Example() {
  const [isActive, setIsActive] = useState(false);
  return (
    <div className="p-4">
      <button
        onClick={() => setIsActive(!isActive)}
        className={classNames(
          'px-4 py-2 rounded', // 공통 스타일
          {
            'bg-blue-500 text-white': isActive, // true일 때
            'bg-gray-300 text-black': !isActive, // false일 때
          }
        )}
      >
        {isActive ? '날 눌러줘~' : '누르지마..'} // text
      </button>
    </div>
  );
}

이 코드는 제가 간단하게 작성해본 토글 버튼입니다.
누를 때마다 isActive 값이 true false로 바뀌면서 스타일이 바뀌게 됩니다.
이렇게 간단하게 조건부 스타일링을 깔끔하게 할 수 있는 classnames 라이브러리 입니다.

공통 스타일: 패딩, border-radius(둥근 모서리)

Active(true): 파랑 배경, 하얀 글씨
!isActive(false): 회색 배경, 검은 글씨

---

✨ 글을 마치며

오늘은 제가 조건부 스타일링을 깔끔한 코드로 보여줄 수 있는 classnames 라이브러리를 소개 해봤습니다.

여러분들도 조건부 스타일링을 하다 코드가 더러워보이면 사용해보시면 좋을거 같습니다.🧹
그리고 제가 놓친 부분도 있을 수 있으니 참고 해보시면 좋을거 같습니다.
https://github.com/JedWatson/classnames
읽어주셔서 감사합니다!!

GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames together