Published On

cn function

shadcn

cn function

cn, clx등 의 함수는 className들을 합성해주는 함수입니다.

shadcn-ui 설치 시 components.json 파일이 생성되는데,

components.jsonjson
  ...
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }

해당 파일은 tailwind css를 추가할 때 발생할 수 있는 클래스 충돌 문제를 해결해주는 역할을 합니다. 또한, cls라는 함수를 직접 만들어서 cn과 동일하게 사용하기도 합니다.

src/lib/utils.tsjavascript
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

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

export const cls(...classnames: string[]) => {
  return classnames.join(" ");
};

이전 포스트

Redux

다음 포스트

Next.js - middleware

연관된 포스트 구경가기

1. cn function2. aws - s33. CloudFlare4. Open Graph란 무엇인가?5. CI/CD6. 프론트엔드에서 상태 관리에 대한 3가지 접근 방식 - Flux, Proxy, Atomic7. 프론트엔드 설정 파일(Configuration Files) 세팅8. SEO(Search Engine Optimization, 검색 엔진 최적화)9. 웹접근성(Web Accessibility)10. OAuth(소셜 로그인)의 구동 원리11. FrontEnd 기본 지식12. JWT와 쿠키 그리고 인증 시스템 구현13. Node.js란?14. React & Vite에서 웹 워커란 무엇인가?
간략히