clsx 란?
조건부로 클래스명을 결합하고 관리하기 위한 유틸리티 함수 쉽게 말해 복잡한 조건부 스타일링을 간단하게 할 수 있도록 도와준다.
설치
yarn add clsx기존 코드
<a
className={`p-[2px] text-base ${heading.level === "three" ? "pl-4 text-sm" : ""} ${heading.level === "two" ? "pl-2 text-sm" : ""}`}
data-level={heading.level}
href={link}
>
{heading.text}
</a>개선 후 코드
import clsx from "clsx";
<a
className={clsx('p-[2px] text-base', heading.level === 'three' && 'pl-4 text-sm', heading.level === 'two' && 'pl-2 text-sm')}
data-level={heading.level}
href={link}
>
{heading.text}
</a>