clsx 사용법과 twMerge와 함께 유틸함수화 해두기

 

https://github.com/lukeed/clsx

GitHub - lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally.

clsx의 깃허브는 다음 링크를 타고 가면 됩니다.

JavaScript로 작성된 228B의 작은 라이브러리입니다.

---

😍사용방법

npm install --save clsx
yarn add clsx

import clsx from 'clsx';
// or
import { clsx } from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

사용방법은 간단합니다

clsx로 import해도 되고 { clsx }로 디스트럭처링해서 가져와도 됩니다.

사용법또한 간단한데

저 위의 방식들을 이용해 적용할 수 있습니다.

자유도가 상당히 높네요

---

🤐이거 굳이 왜 씀?

이 clsx는 조건부 렌더를 작성하기 쉬워지는 장점을 제공해줍니다.

---

TypeScript에서의 사용방법

import { ClassValue, clsx } from 'clsx';

ClassValue 타입을 import해올 수 있습니다.

이 ClassValue에 대한 정의로 가보면 굉장히 심플한 타입을 갖고 있는 것을 볼 수 있습니다.

export type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined;
export type ClassDictionary = Record<string, any>;
export type ClassArray = ClassValue[];

export declare function clsx(...inputs: ClassValue[]): string;
export default clsx;

대충 여러가지를 유니온타입으로 받을 수 있게 해두었는데

저걸 일일히 다 작성해주려면 귀찮지만.. 그렇다고 any 타입을 쓰기는 찝찝하니

import해서 사용할 수 있게 제공을 해주네요!

---

😙유틸함수화 시켜 사용하기

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

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

tailwind-merge와 함께 유틸함수로 만들어 사용해줍시다.