컴파운드 컴포넌트

styled 패키지는 각 피커의 내부 구조와 렌더링을 완전히 제어할 수 있는 컴파운드 컴포넌트 API를 제공합니다. 단일 모놀리식 컴포넌트 대신, 개별 파트들을 조합하여 피커를 구성합니다.

동작 방식

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

import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

// 간단한 사용법 — 기본 레이아웃 렌더링
<DatePicker value={value} onChange={setValue} />

// 컴파운드 사용법 — 구조에 대한 완전한 제어
<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>