핵심 요약
shadcn/ui v3가 Radix 의존성을 Base UI로 전환. 컴포넌트 24개 마이그레이션 — 번들 -120KB, 접근성 검사 패스율 동일, 일부 API 호환 깨짐. 한 달 작업 사후.
1. 왜 바뀌었나
Radix의 유지보수 사이클이 느리고 React 19 호환 지연. Base UI는 MUI 팀의 unstyled 컴포넌트로 React 19/RSC 정식 지원, 번들 더 작음.
2. 마이그레이션 명령
npx shadcn@3 migrate --from radix --to base-ui자동 변환 80%, 나머지 20%는 API 차이 — props 이름, controlled/uncontrolled 패턴, Dialog 마운트 시점.
3. 변경된 컴포넌트 패턴
| 컴포넌트 | Radix props | Base UI props |
|---|---|---|
| Dialog | open, onOpenChange | open, onClose |
| Tabs | value, onValueChange | value, onChange(_, value) |
| Tooltip | TooltipProvider 필수 | 자동 ctx |
4. 번들·접근성
- 전체 컴포넌트 번들: 380KB → 260KB
- axe-core 통과율: 동일 100%
- React 19 useFormStatus 지원: Base UI ✅
5. 함정
- animation — Radix data-state 속성으로 했던 CSS transition, Base UI는 data-open 등 이름 다름. 일괄 변환 stylesheet 마이그레이션 도구가 자동 처리
- controlled mode 강제 — Base UI는 일부 컴포넌트에서 controlled 강제. uncontrolled로 쓰던 곳 상태 추가
- custom Trigger — asChild 패턴 대신 render prop. 학습 곡선
- Headless UI 혼용 — 마이그레이션 중간 단계에서 Tooltip 중첩 시 portal 충돌
댓글 0