• 목록
• 게시판 리스트 옵션
  • 검색

✅ 조건부 클래스 적용할 때 삼항 연산자만 쓰면 지저분해진다

clsx나 classnames로 깔끔하게 관리하자

스타일을 조건에 따라 바꿀 때 보통 이렇게 한다:

<div className={isActive ? "btn active" : "btn"}>버튼</div>

조건이 늘어나면 코드가 점점 난잡해지고 가독성 떨어짐:

className={isActive ? (isDark ? "btn dark" : "btn light") : "btn"}

✅ 해결: clsx 또는 classnames 사용

import clsx from "clsx";

<div className={clsx("btn", {
  active: isActive,
  dark: isDark,
  light: !isDark
})}>
  버튼
</div>

• 기본 클래스는 문자열로

• 조건부 클래스는 객체로

• 여러 조건이 섞여도 읽기 쉽고 유지보수 편함

✔️ UI 조건 분기 많은 프로젝트일수록
clsx 하나로 클래스 지옥 탈출 가능하다.