clsx, twMerge, cn, shadcn-ui

shadcn-ui 라이브러리를 사용하면 자주 만나고, 필수 요소 중 하나인 cn 함수를 자세히 들어다 보려고 합니다. 그러면 이해도가 높아지고 기억에도 도움이 됩니다. shadcn-ui@latest init 으로 설치하면, lib>utils.ts가 생성되고, 이 파일에는 cn() 함수가 있습니다.

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

 

cn 은 ClassName 의 앞 글짜에서 온 것 같으며, 두개의 라이브러리를 조합하여 만든 함수입니다. 가변인수로 받아서 clsx()로 넘겨줍니다.

• clsx: 이 라이브러리는 조건부 클래스 네임을 쉽게 조합할 수 있도록 도와줍니다. 다양한 입력을 받아 문자열로 변환해줍니다.  
• tailwind-merge (twMerge): 이 라이브러리는 Tailwind CSS 클래스 네임을 병합하고 중복되거나 불필요한 클래스를 제거하여 최적화된 결과를 제공합니다.

clsx(inputs): 이 함수는 clsx를 사용하여 입력된 클래스 네임들을 하나의 문자열로 변환합니다. clsx는 배열, 객체, 문자열 등을 받아서 조건부로 클래스 네임을 조합하는 데 유용합니다.

twMerge(clsx(inputs)): 변환된 문자열을 twMerge에 전달하여 Tailwind CSS 클래스 네임을 병합합니다. 이 과정에서 중복되거나 상충되는 클래스 네임이 최적화됩니다.