className 유틸리티 함수 - tsx

CSS 클래스를 동적으로 결합할 때 유용합니다.

src>utils>index.ts>

export function classNames(...classes: unknown[]): string {
  return classes.filter(Boolean).join(' ')
}

...classes: unknown[]

이 부분은 함수가 가변 인수(여러 개의 인수)를 받을 수 있게 합니다. 여기서 ...는 스프레드 연산자이며, 함수 호출 시 전달된 모든 인수들을 배열 형태로 classes 변수에 저장합니다. 인수의 타입은 unknown[]로 지정되어 있으며, 이는 배열의 요소들이 어떤 타입일지 모른다는 것을 나타냅니다. (TypeScript에서 사용됩니다.)

 

classes.filter(Boolean)
classes 배열을 Boolean 함수를 사용하여 필터링을 수행합니다. JavaScript에서 Boolean 함수는 인수를 불리언 값으로 변환합니다. 따라서 이 필터링 과정은 false, null, undefined, 0, NaN, 빈 문자열("") 등을 제거하고, truthy한 값들만 남깁니다.

 

.join(' ')
필터링된 배열의 요소들을 공백(' ')으로 구분된 하나의 문자열로 결합합니다.

import { classname } from 'utils'


console.log(classNames('btn', undefined, 'btn-primary', false, 'active', null, '')); 
// 결과: 'btn btn-primary active'