컨텍스트

headless 패키지는 훅을 감싸고 React Context를 통해 상태를 노출하는 Context provider를 제공합니다. 이를 통해 컴파운드 컴포넌트 패턴을 사용할 수 있습니다 — UI를 작고 집중된 하위 컴포넌트로 분할하고, props를 전달하는 대신 컨텍스트에서 상태를 읽도록 만듭니다.

왜 컨텍스트를 사용하나요?

컨텍스트가 없으면 모든 상태 조각을 props를 통해 전달해야 합니다:

// Without context -- prop drilling
function MyDatePicker() {
  const picker = useDatePicker({ value, onChange });
  return (
    <MyTrigger displayValue={picker.displayValue} onToggle={picker.handleToggle} />
    <MyCalendar calendar={picker.calendar} getDayProps={picker.getDayProps} ... />
    <MyFooter onConfirm={picker.handleConfirm} onCancel={picker.handleCancel} ... />
  );
}

컨텍스트를 사용하면 하위 컴포넌트가 필요한 것을 직접 소비합니다:

// With context -- compound components
function MyDatePicker() {
  return (
    <DatePickerProvider value={value} onChange={onChange}>
      <ExampleWrapper variant="headless" client:visible>
        <MyTrigger client:visible />
      </ExampleWrapper>
      <ExampleWrapper variant="headless" client:visible>
        <MyCalendar client:visible />
      </ExampleWrapper>
      <ExampleWrapper variant="headless" client:visible>
        <MyFooter client:visible />
      </ExampleWrapper>
    </DatePickerProvider>
  );
}

function MyTrigger() {
  const { displayValue, handleToggle } = useDatePickerContext();
  return <button onClick={handleToggle}>{displayValue}</button>;
}

사용 가능한 Provider

Provider	내부적으로 사용되는 훅	소비자 훅
`DatePickerProvider`	`useDatePicker`	`useDatePickerContext()`
`DateRangePickerProvider`	`useDateRangePicker`	`useDateRangePickerContext()`
`DateTimePickerProvider`	`useDateTimePicker`	`useDateTimePickerContext()`
`DateRangeTimePickerProvider`	`useDateRangeTimePicker`	`useDateRangeTimePickerContext()`

각 provider는 타입이 지정된 컨텍스트(해당 피커 타입에 한정)와 통합된 PickerContext(모든 타입에서 공유)를 모두 렌더링합니다.

import {
  DatePickerProvider,
  DateRangePickerProvider,
  DateTimePickerProvider,
  DateRangeTimePickerProvider,
} from "react-date-range-picker-headless";

DatePickerProvider

useDatePicker를 감쌉니다. DatePickerContext + PickerContext를 제공합니다.

import type { DatePickerProviderProps } from "react-date-range-picker-headless";

Prop	타입	설명
`children`	`ReactNode`	필수. 자식 컴포넌트입니다.
`value`	`Date \| null`	필수. 현재 날짜입니다.
`onChange`	`(date: Date \| null) => void`	필수. 변경 핸들러입니다.
`inline`	`boolean`	인라인으로 렌더링합니다 (팝업 없음).
`size`	`DatePickerSize`	크기 변형입니다.
`placeholder`	`string`	트리거의 placeholder입니다.
`name`	`string`	폼 필드 이름입니다.
…rest	`BaseDatePickerOptions`	모든 기본 옵션 (`minDate`, `maxDate`, `locale` 등)입니다.

소비자 훅: useDatePickerContext()는 UseDatePickerReturn을 반환합니다.

DateRangePickerProvider

useDateRangePicker를 감쌉니다. DateRangePickerContext + PickerContext를 제공합니다.

import type { DateRangePickerProviderProps } from "react-date-range-picker-headless";

Prop	타입	설명
`children`	`ReactNode`	필수. 자식 컴포넌트입니다.
`value`	`{ start: Date \| null; end: Date \| null }`	필수. 현재 범위입니다.
`onChange`	`(value: { start: Date \| null; end: Date \| null }) => void`	필수. 변경 핸들러입니다.
`inline`	`boolean`	인라인으로 렌더링합니다.
`size`	`DatePickerSize`	크기 변형입니다.
`placeholder`	`string`