Radix는 끝났습니다, 대신 이걸 쓰세요... (Base UI)

Radix UI와 Material UI를 제작했던 핵심 개발자들이 모여 만든 새로운 헤드리스 UI 라이브러리인 Base UI를 소개합니다. 헤드리스 UI는 기능과 접근성은 라이브러리가 담당하고 디자인은 개발자가 직접 정의하는 방식으로, AI 시대에 더욱 중요해진 정교한 접근성 처리를 지원합니다. Base UI는 Radix에는 없는 콤보 박스 같은 고급 컴포넌트를 포함하여 개발자들에게 더 넓은 선택지를 제공합니다. 공식 문서는 CSS 모듈과 테일윈드 예시를 모두 제공하여 구현의 편의성을 극대화했습니다. 이 섹션은 왜 기존 Radix 사용자들이 Base UI에 주목해야 하는지 기초적인 배경을 설명합니다.

Radix UI가 현재 활발한 업데이트가 없는 이른바 "좀비 상태"에 빠졌다는 점을 GitHub 통계와 함께 지적합니다. Radix는 기업 인수 이후 투자가 거의 이루어지지 않아 한 달간 처리된 PR이나 이슈가 전무한 반면, Base UI는 수백 개의 작업을 처리하며 활발히 성장 중입니다. 심지어 Radix의 공동 제작자조차 현재는 Base UI 팀에서 일하며 프로젝트의 미래를 Base UI에 두고 있다고 언급했습니다. 개발자들은 미래의 버그 수정과 지속 가능성을 위해 활발히 관리되는 의존성을 선택해야 합니다. 프로젝트의 장기적인 안정성을 고려할 때 라이브러리의 관리 상태가 얼마나 중요한지 강조하는 구간입니다.

Radix의 asChild 프롭이 가진 불명확함을 해결하기 위해 Base UI가 도입한 render 프롭 방식을 상세히 설명합니다. asChild는 자식 요소와 속성을 병합할 때 코드를 읽는 개발자가 의도를 놓치기 쉽다는 단점이 있었습니다. 반면 Base UI의 render 프롭은 렌더링할 요소를 직접 명시하므로 훨씬 직관적이고 가독성이 높습니다. 또한 render 프롭에 함수를 전달하여 컴포넌트 내부의 체크 여부나 비활성화 상태 같은 데이터에 직접 접근할 수 있는 유연함을 제공합니다. 이러한 변화는 단순한 스타일 수정을 넘어 복잡한 인터랙션을 구현할 때 개발자에게 더 강력한 제어권을 부여합니다.

Base UI가 데이터를 처리하는 방식과 Radix에서 가장 요청이 많았던 멀티 셀렉트 기능의 지원 여부를 다룹니다. Base UI는 부모 컴포넌트에 직접 데이터 배열을 전달하는 데이터 기반 방식을 사용하여 SSR 환경에서의 성능 최적화를 꾀합니다. 기존 Radix에서는 구현하기 까다로웠던 멀티 셀렉트 기능을 multiple 프롭 하나로 간단히 활성화할 수 있다는 점이 큰 강점입니다. 스피커는 데이터 배열을 두 번 작성해야 하는 현재의 방식에 대해 React Aria와 같은 개선 아이디어를 제안하기도 합니다. 이는 복잡한 폼 요소를 다루는 개발자들에게 실질적인 생산성 향상을 약속하는 핵심 기능들입니다.

클래스 네임에 함수를 사용하여 컴포넌트 상태에 따른 스타일을 조건부로 적용하는 혁신적인 스타일링 방식을 소개합니다. 이 방식은 Tailwind Variants와 같은 도구와 함께 사용할 때 데이터 속성을 일일이 찾는 것보다 훨씬 깔끔한 코드 구조를 만들어 줍니다. Base UI는 단순한 기능 제공을 넘어 React Hook Form과의 통합, 애니메이션 지원 등 현대적인 웹 개발 요구사항을 충실히 반영하고 있습니다. 스피커는 당장 모든 프로젝트를 마이그레이션할 필요는 없지만, 신규 프로젝트라면 무조건 Base UI를 선택할 것이라고 단언합니다. 마지막으로 활발한 커뮤니티 소통의 중요성을 언급하며 시청자들에게 새로운 변화에 동참할 것을 권유합니다.