shadcn 활용해서 커스텀 모듈 만들기

들어가며

shadcn은 Radix UI와 Tailwind CSS를 기반으로 한 재사용 가능한 컴포넌트 컬렉션이다.

내가 아는 바로는 Bootstrap처럼 디자인 된 컴포넌트를 제공하기도 하며, cn 함수를 통해 여러 클래스를 합쳐 나만의 커스텀 컴포넌트를 만들 수도 있다.

 

이건 코드를 보면 이해가 빠르다.

백 번 듣는 것이 한 번 보는 것만 못하다
: 백문불여일견

이걸 사용해서 프로젝트 개발을 하고싶다면, 프로젝트를 생성할 때 다음과 같이 따라하면 된다.

 

프로젝트 생성 ( 본인은 Next.js, Typescript, TailwindCSS를 사용한다. )

npx create-next-app@latest my-app --typescript --tailwind --eslint

 

shadcn 셋업

npx shadcn-ui@latest init

 

shadcn 셋업. 초기 설정 ( 셋업 단계에서 아래와 같이 선택지가 나오는데 잘 모르겠으면 아래와 같이 하면 된다. )

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › yes

 

이 과정까지 마치면 내 프로젝트 폴더에는 lib/utils.ts가 생성된다.

chadcn init 후 폴더 구조

그리고 utils.ts 파일은 다음과 같이 구성되어 있다.

shadcn utils.ts

이제 export 된 cn 함수를 사용하면 된다.

 

실제 본인이 사용한 코드를 예시로 설명하고자 한다.

 

다음은 Button을 컴포넌트로 뽑기 위해 만든 Button.tsx이다. 

위치는 본인이 원하는 위치에 파일을 생성하도록 하는데, tailwind를 사용할 경우 tailwind.config.ts 을 확인하여 폴더 위치를 매치 시켜야한다. 스타일이 적용되지 않는다면 이 문제일 것이다.

 

cn()의 인자로는 ClassName을 받을 수 있다. 

ClassName을 직접 정의하거나 인자로 받은 ClassName을 인자로 넘겨줄 수 있다는 말인거다.

 

* 여기서 onClick으로 넘겨준 것은 클릭 시 이벤트를 핸들하기 위함.

import { cn } from "@/lib/utils";

interface ButtonInterface {
  className?: string;
  children?: React.ReactNode;
  onClick?: () => void;
}

export const CustomButton = (props: ButtonInterface) => {
  const { className, children, onClick } = props;
  return (
    <button
      className={cn(`px-6 py-3 rounded-xl transition text-white`, className)}
      onClick={() => {
        onClick && onClick();
      }}
    >
      {children}
    </button>
  );
};

 

다음은 CustomButton을 컴포넌트로 사용하는 코드이다.

div 태그는 CustomButton에 children으로 넘겨지는데, 이를 통해 컴포넌트의 재사용 효율을 높일 수 있다.

 

<CustomButton onClick={handleLogin} color="gray">
  <div className="flex justify-center items-center gap-4">
    <Image src={`/google.svg`} alt="google" width={30} height={30} />
    <p>Google 로그인</p>
  </div>
</CustomButton>

 

이 컴포넌트를 사용한 결과는 다음과 같다.

CustomButton 컴포넌트 사용 결과