컴파운드 컴포넌트

Tailwind v4 패키지는 각 피커의 내부 구조와 렌더링을 완벽하게 제어할 수 있는 컴파운드 컴포넌트(Compound Component) API를 제공합니다. 단일 모놀리식 컴포넌트 대신, 개별 부품으로 피커를 구성합니다.

작동 방식

모든 피커(예: DatePicker)는 간단한 컴포넌트이자 컴파운드 파트의 네임스페이스입니다:

import { DatePicker } from "react-date-range-picker-tailwind4";


// Simple usage -- renders default layout
<DatePicker value={value} onChange={setValue} />


// Compound usage -- full control over structure
<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger />
  <DatePicker.Content>
    <DatePicker.Header>
      <DatePicker.PrevButton />
      <DatePicker.Title />
      <DatePicker.NextButton />
    </DatePicker.Header>
    <DatePicker.Grid />
    <DatePicker.Footer>
      <DatePicker.ClearButton />
      <DatePicker.CancelButton />
      <DatePicker.ConfirmButton />
    </DatePicker.Footer>
  </DatePicker.Content>
</DatePicker.Root>

컴파운드 컴포넌트를 사용하면 다음을 수행할 수 있습니다:

  • 교체: 모든 파트를 자체 렌더링으로 교체 (예: 커스텀 트리거, 커스텀 날짜 셀)
  • 재배치: 레이아웃 재배치 (예: 푸터 버튼 이동, 오늘 버튼 추가)
  • 생략: 필요 없는 파트 생략 (예: 최소한의 달력을 위해 푸터 제거)
  • 클래스 재정의: className prop을 통해 모든 파트의 클래스 재정의

다음 페이지에서는 라이브 데모와 함께 각 커스터마이제이션 패턴을 단계별로 설명합니다.

사용 가능한 파트

DatePicker

|