0. shadcn ui 과 Radix UI

shadcn ui 과 Radix UI

Radix UI는 component 기능적 부분(행동, 접근성, 상태 관리 등)만 제공하고, 시각적인 부분(스타일링, 디자인)은 제공하지 않는 즉 헤드리스 UI component 라이브러리입니다.

shadcn/ui는 Radix UI를 기반으로 만들어 기능성과 접근성을 유지하면서, 디자인과 스타일을 추가된 component 모음입니다.

---

Radix UI 특징

Primitive 는 Radix UI에서 기본적이고 근본적인 ui components 를 의미합니다.

1. 접근성

• 모든 component는 WAI-ARIA 디자인 패턴을 준수합니다
• 키보드 내비게이션 및 포커스 관리 기능 내장
• 스크린 리더와 호환됨

2. 개발자 경험

• component 간 상태 공유를 위한 내장 콘텍스트(Context) API 를 제공하며, 모든 primitive component 는 일관된 API 패턴 유지

• 다양한 animation 라이브러리와 통합 가능하며 animation 을 위한 특수 이벤트와 상태 제공

• 타입스크립트 지원

• 서버 사이드 렌더링(SSR) 지원하여 Next.js, Gatsby 등의 프레임워크와 문제없이 작동하며 또한 하이드레이션(hydration) 불일치 문제 방지

• 포털(Portal) 기능으로 component 를 DOM 트리의 다른 위치에 렌더링

• 포커스 스코프(FocusScope) 지원

• 비주얼 슬롯(Slot) component 지원

  
  

    import  {  Slot  }  from  '@radix-ui/react-slot';
  
    function Button(props) {
      // asChild가 true면 자식 요소로 렌더링
      const Comp = props.asChild ? Slot : 'button';
      return <Comp {...props} />;
    }
  
    // 사용 방법
    <Button>일반 버튼</Button>
  
    // 링크처럼 작동하지만 버튼 스타일을 가진 요소
    <Button asChild>
      <a href="/페이지">링크 버튼</a>
    </Button>

3. 상태 관리

• 각 component 는 자체적으로 내부 상태를 관리하므로, 상태 관리 코드를 직접 작성할 필요가 없습니다.
• controlled component(상태를 외부에서 관리 및 제어 하는 component)로도 사용 가능합니다.

4. 스타일링

• 스타일링은 전적으로 사용자에게 맡겨져 있으며, CSS, CSS-in-JS, Tailwind CSS 등 어떤 방식으로도 스타일을 적용 가능합니다.
• 테마 시스템과 통합이 용이한 구조

5. 합성 패턴 (Compound Component Pattern)

• 각 Primitive 는 여러 파트로 구성되어 있으며, 개발자가 세밀하게 제어할 수 있도록 설계되었습니다. 예를 들어, Root, Trigger, Portal, Overlay, Content, Title, Description, Close와 같은 부분으로 나누어져 있습니다.

import * as Dialog from '@radix-ui/react-dialog';

export default () => (
  <Dialog.Root>
    <Dialog.Trigger>대화상자 열기</Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Overlay />
      <Dialog.Content>
        <Dialog.Title>제목</Dialog.Title>
        <Dialog.Description>설명</Dialog.Description>
        <Dialog.Close>닫기</Dialog.Close>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
);

---

shadcn ui 특징

• 패키지가 아닌 컴포넌트 모음: npm으로 설치하는 일반적인 라이브러리가 아니라, 코드를 직접 프로젝트에 복사해서 사용하는 접근 방식
• Tailwind CSS 사용: 스타일링에 Tailwind CSS를 활용하여 쉽게 커스터마이징 가능
• 자유로운 커스텀: 컴포넌트 코드를 직접 소유하므로 필요에 따라 자유롭게 수정 가능
• 디자인 완성도: 바로 사용 가능한 디자인된 컴포넌트 제공
• 다크 모드 지원: 기본적으로 다크 모드 지원
• TypeScript 지원: 완전한 TypeScript 타입 지원

---

shadcn ui 설치 및 사용

shadcn ui 의 명령어를 활용하여 초기 세팅 및 필요한 component 를 파일을 가져와 사용합니다. 또한 필요한 component 를 사용하기 위해서 @radix-ui/react-dialog 를 설치하고 해당 내용을 기반으로 스타일이 입혀진 component 를 제공받습니다.

일부 이미지 소스가 필요한 경우 lucide-react 를 설치하여 사용합니다.

1. 설치

npx shadcn@latest init

2. 다음 파일들이 생성 및 설정됩니다.

• components.json (구성 파일)
• tailwind.config.js (업데이트됨)
• globals.css (업데이트됨)
• lib/utils.ts (새로 생성)

3. 컴포넌트 활용

# 이 과정에서 @radix-ui/react-dialog 를 설치 및 해당 내용을 기반으로 스타일이 입혀진 dialog 파일을 생성합니다
npx shadcn-ui@latest add dialog

---

참고

radix ui 공식문서
shadcn ui 공식문서