React Aria 통합 경계

Context-Action은 React Aria와 도메인 경계에서 통합합니다. React Stately가 제공하는 컴포넌트 내부 상호작용 상태를 대체하지 않습니다.

실행 가능한 레퍼런스는 예제 앱의 /integrations/react-aria-reference에 있습니다. react-aria-components의 다중 선택·정렬 Table 및 Calendar를 사용하고, 이 컴포넌트들이 내보내는 제품 도메인 결정을 Context-Action action과 store로 관리합니다.

공식 컴포넌트 레퍼런스

이 레퍼런스는 ARIA 동작을 직접 재구현하지 않고 컴포넌트 계약을 따릅니다.

React Aria Table은 방향 키 이동, selectedKeys 기반 controlled selection, sortDescriptor·onSortChange 기반 controlled sorting을 정의합니다.
React Aria Calendar은 날짜 grid, 키보드 이동, calendar-aware 날짜 값을 소유합니다.
React Stately Selection은 "all" sentinel을 포함한 controlled selection 모델을 설명합니다.

접근성 의미론과 상호작용의 상세한 기준은 위 공식 문서에 둡니다. 이 가이드는 그 결과가 애플리케이션 상태와 도메인 action으로 넘어가는 경계만 정의합니다.

소유 모델

관심사	소유자	이유
키보드 이동, 포커스 이동, typeahead, 컬렉션 순회	React Aria / React Stately	접근성 상태 계약에 의존하는 동작입니다.
Calendar 월 이동과 셀 포커스	React Aria / React Stately	고빈도 상호작용 루프를 로컬·동기적으로 유지합니다.
선택한 작업, 유지할 정렬, 선택한 리뷰 날짜	Context-Action Store	다른 화면과 handler가 소비할 수 있는 애플리케이션 값입니다.
일정 등록, 권한 확인, API 작업, 감사 기록	Context-Action Action handler	비동기·guard·observer가 필요한 도메인 워크플로입니다.

Table 경계

Context-Action에 기록된 선택·정렬 값을 controlled prop으로 전달합니다. React Aria callback은 의미 있는 action으로 변환하되, SelectionManager, 행 포커스, 컬렉션 생성을 재구현하지 않습니다.

tsx

<Table
  selectionMode="multiple"
  selectedKeys={new Set(selectedKeys)}
  onSelectionChange={(keys) => {
    const selected = keys === 'all'
      ? allRowIds
      : [...keys].map(String);
    void dispatch('tableSelectionChanged', { keys: selected });
  }}
  sortDescriptor={sort}
  onSortChange={({ column, direction }) => {
    void dispatch('tableSortChanged', {
      column: column as SortColumn,
      direction,
    });
  }}
/>

행의 포커스와 키보드 동작은 React Aria에 맡깁니다. action handler는 선택을 저장하거나 상세를 불러오고 다른 context를 갱신할 수 있지만, 컴포넌트가 자체 이벤트를 처리하기 전에 await 경계를 만들어서는 안 됩니다.

Calendar 경계

React Aria 날짜 객체 대신 직렬화 가능한 ISO 날짜를 store에 저장합니다. 컴포넌트 경계에서 변환하고, 표시 중인 월 이동과 grid 포커스는 로컬에 둡니다.

tsx

<Calendar
  value={selectedDate ? parseDate(selectedDate) : null}
  onChange={(value) => {
    void dispatch('calendarDateCommitted', {
      value: value?.toString() ?? null,
    });
  }}
/>

이 구조에서는 calendar 구현 타입에 도메인 store를 결합하지 않고도 handler에서 일정 검증, 서버 갱신, 감사 이벤트 기록을 수행할 수 있습니다.

검증 체크리스트

다른 컴포넌트에 이 패턴을 적용하기 전에 다음을 확인합니다.

화살표 키 이동, 범위/다중 선택, focus-visible 동작
키보드와 포인터 입력 모두에서 Calendar 월 이동과 날짜 선택
관련 popover 또는 dialog의 overlay 포커스 복원
controlled 값이 서버에서 공급된다면 React 19.2 SSR과 hydration
action handler가 고빈도 상호작용을 지연시키지 않는지: roving focus를 action pipeline으로 구동하지 말고 의미 있는 확정 이벤트만 handler로 전달

저장소 레퍼런스 검증 범위

실행 가능한 레퍼런스는 상호 보완적인 두 검사를 가집니다.

pnpm --filter example test -- src/pages/integrations/react-aria/ReactAriaReferencePage.test.tsx는 키보드 Table 선택, 정렬, 키보드 Calendar 선택, 그 결과의 도메인 action audit entry를 검증합니다.
pnpm verify:react-aria-reference-hydration은 레퍼런스를 번들하고 현재 로컬 Core·React 후보 artifact를 설치한 상태에서 React 19.2.0·19.2.8 hydration을 검증합니다. hydration recovery error나 후보 버전 불일치가 있으면 실패합니다.

더 자세한 React Aria 상태 계약은 공식 React Aria 및 React Stately 문서를 참조합니다. Context-Action은 컴포넌트의 접근성 상태 머신이 아니라 그 주변의 애플리케이션 워크플로를 소유합니다.

React Aria 통합 경계 ​

공식 컴포넌트 레퍼런스 ​

소유 모델 ​

Table 경계 ​

Calendar 경계 ​

검증 체크리스트 ​

저장소 레퍼런스 검증 범위 ​