[Clsx] Tailwindcss에 조건 추가하기

Tailwindcss를 이용하여 상태 값에 따른 css 변화를 주기 위해서는 삼항 연산자를 주로 사용하였다.

그런데 사용할수록 코드가 너무 더러워지는 느낌이 자주 들어서 어떻게 해결할 까 생각하던 중 GPT가 clsx 패키지를 추천해 줬다.

맨 처음 리액트를 배웠을 때는 clsx라는 패키지는 없었고, classnames라는 패키지를 주로 사용했었다.

하지만 tailwindcss를 삼항연산자로 조건을 줄 때, classnames를 사용하지 않고 아래와 같이 사용했었다.

<... className={stateVal ? "max-w-100px" : "w-full"} />

문제는 항상 공통된 css가 있고, 조건으로 나눠지는 스타일링 css가 있었다는 건데, 공통된 css는 주로 한 줄에 표현하고,

뒤에 조건 스타일링을 덧붙이면 되었지만 이걸 매번 +나 “안에 ${}를 이용해서 사용하면 쉽게 지저분해지고 직관적이지 않았다.

C언어에서 포맷 스트링으로 문자열 만들다가 처음으로 파이썬에 와서 +로 문자열을 이어 붙인 느낌이랄까?

그러다가 clsx 패키지를 GPT가 알려줘서 사용해 봤는데, 생각보다 직관적인고 편리하다.

import clsx from "clsx"

<div className={clsx("공통된 스타일링",
	stateVal1 ? "조건1 스타일링" : "조건2 스타일링",
    stateVal2 ? "조건3 스타일링" : "조건4 스타일링"
   	)}
>

// 예
 <div
	className={
    	clsx("max-w-dvw overflow-hidden border border-neutral-200 rounded-2xl px-4 shadow-sm hover:shadow-md transition-all ease-in duration-200",
		!isFold ? "py-4" : "pt-4 pb-0")
     }
>

아래는 npm trends에서 clsx와 classnames 패키지를 비교한 모습이다.

확실히 clsx가 더 늦게 만들어져서 그런지 초반에는 사용자가 classnames가 더 많았지만 점점 clsx로 대체되는 분위기이다.

크기도 23kb(classnames) vs 8.35kb(clsx)로 훨씬 작다.

애초에 clsx에 github에 들어가 보면 About에 ” A tiny (239B) utility for constructing `className` strings conditionally.”라고 쓰여있을 정도니 말 다했다.