shadcn/ui - 복사해서 쓰는 컴포넌트의 새로운 패러다임

shadcn/ui란?

Beautifully designed components that you can copy and paste into your apps.

shadcn/ui는 전통적인 컴포넌트 라이브러리와 근본적으로 다른 접근 방식을 취합니다. npm install로 패키지를 설치하는 대신, 필요한 컴포넌트의 소스 코드를 직접 프로젝트에 복사합니다.

왜 이런 접근이 좋은가?

1. 완전한 제어권

// 컴포넌트를 내 프로젝트에 복사한 후 자유롭게 수정
export function Button({ variant = "default", ...props }) {
  return (
    <button
      className={cn(buttonVariants({ variant }))}
      {...props}
    />
  );
}

2. 번들 크기 최적화

사용하지 않는 컴포넌트는 아예 프로젝트에 존재하지 않으므로, 트리 셰이킹을 고민할 필요가 없습니다.

3. 의존성 지옥 탈출

패키지 버전 충돌, 호환성 이슈에서 자유롭습니다. 코드는 내 것이니까요.

시작하기

npx shadcn@latest init
npx shadcn@latest add button

이 명령어를 실행하면 components/ui/button.tsx에 Button 컴포넌트 소스 코드가 생성됩니다.

마무리

shadcn/ui는 “라이브러리가 아니라 컴포넌트 모음”이라는 철학이 개발자 커뮤니티에 큰 반향을 일으켰습니다. 2024년 GitHub에서 가장 빠르게 성장한 프로젝트 중 하나이며, 이 접근 방식은 앞으로 더 많은 프로젝트에 영향을 줄 것입니다.