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

하이라이트

• Base UI는 Radix, Floating UI, Material UI 원조 제작자들이 개발한 헤드리스 UI 라이브러리로 접근성과 핵심 기능성을 기본 제공한다.

• GitHub 기여도 측정 기준 Base UI가 한 달간 이슈 58개와 PR 154개를 처리하는 동안 Radix는 병합된 PR 및 이슈 해결 실적이 없다.

• Radix의 as-child 속성을 대신해 사용되는 Base UI의 render 프로퍼티는 커스텀 컴포넌트 전달 및 상태 기반 렌더링 로직 구성을 명확하게 만든다.

• Base UI의 Root 컴포넌트에 items 데이터 배열을 미리 넘겨주면 서버 사이드 렌더링 환경에서 성능적 이점을 얻는다.

• Base UI 셀렉트 컴포넌트는 multiple 속성 하나로 다중 선택 기능을 활성화하며 콤보박스 및 자동 완성 기능을 기본 제공한다.

• Tailwind 사용 시 긴 data 속성 문자열 대신 classNames 함수나 Tailwind Variants를 활용하여 컴포넌트 상태별 스타일을 깔끔하게 분리할 수 있다.

타임라인

1. 00:00 - 01:05

   Base UI의 등장 배경 및 기본 특징

   LLM으로도 완벽히 처리하기 어려운 복잡한 접근성 및 컴포넌트 기능성을 헤드리스 형태로 제공하여 자유로운 디자인 구현을 돕는다. 콤보박스 등 고도화된 UI 요소와 함께 Tailwind 및 CSS 모듈 적용에 대한 구체적인 예제 문서를 갖추고 있다.

   • Base UI는 Radix, Floating UI, Material UI 개발진이 참여하여 만든 헤드리스 UI 라이브러리다.
   • 복잡한 접근성 및 엣지 케이스 처리를 담당하며 CSS 모듈 및 Tailwind 연동 예제 문서를 상세히 제공한다.
   • Radix에 없는 콤보박스 등 고급 컴포넌트를 기본적으로 포함한다.
2. 01:06 - 02:07

   Radix와 Base UI의 유지보수 상태 비교

   Radix 개발진 대부분이 이적하면서 기존 라이브러리의 버그 수정 및 피드백 반영이 일절 이루어지지 않고 있다. 의존성 관리와 장기적인 라이브러리 안정성을 고려할 때 활발히 개발되고 있는 Base UI가 프로덕션에 더 적합하다.

   • Base UI는 활발한 업데이트를 이어가고 있으나 Radix는 프로젝트 유지보수가 사실상 중단된 상태다.
   • 한 달 동안 Base UI가 이슈 58개 닫기 및 PR 154개 병합을 기록한 반면 Radix는 실적이 없다.
   • WorkOS의 인수 이후 주요 개발진과 Radix 공동 창업자가 Base UI 팀으로 이적했다.
3. 02:08 - 04:30

   as-child 개편 및 render 프로퍼티의 장점

   Radix의 as-child 방식은 코드 가독성을 떨어뜨리고 프로퍼티 전달 과정을 놓치기 쉽게 만든다. Base UI의 render 프로퍼티를 사용하면 명시적인 컴포넌트 전달이 가능하며, custom hook 및 전달받은 함수 인자(checked, disabled 등)를 통해 상태별 렌더링 체계를 직관적으로 구축할 수 있다.

   • Base UI는 직관적이지 않던 as-child 속성을 render 프로퍼티 구조로 대체했다.
   • render 프로퍼티에 함수를 전달하여 컴포넌트 내부 상태와 변수에 직접 접근할 수 있다.
   • 체크 여부, 비활성화 상태 등에 따라 동적으로 커스텀 아이콘이나 렌더링 로직을 적용한다.
4. 04:31 - 06:40

   데이터 기반 구조 및 다중 선택 기능

   컴포넌트 렌더링 전 데이터를 미리 인지하도록 설계되어 SSR 환경에서 성능 이점이 존재한다. 또한 Radix에서 번거로운 커스텀 작업이 필요했던 다중 선택 기능과 콤보박스, 자동 완성 기능 등을 기본 속성 확장을 통해 손쉽게 구현할 수 있다.

   • Select Root에 items 데이터 배열을 미리 전달하여 서버 사이드 렌더링 성능을 향상시킨다.
   • Radix에서 지원되지 않던 셀렉트 컴포넌트의 다중 선택(multi-select) 기능이 표준으로 제공된다.
   • multiple 프로퍼티 설정 하나만으로 다중 선택 기능을 즉시 활성화한다.
5. 06:41 - 08:26

   상태 기반 스타일링 옵션과 라이브러리 조합

   Tailwind 데이터 속성(data attributes) 사용 시 발생하던 길고 지저분한 클래스 문자열 문제를 함수형 className 설정으로 해결한다. React Aria처럼 정교한 상태 접근을 허용하면서도 상대적으로 낮은 학습 곡선을 유지하여 최상의 사용성을 구현한다.

   • className에 함수를 전달하여 상태 조건에 맞춘 가독성 높은 스타일 구성을 지원한다.
   • Tailwind Variants 라이브러리와 조합하여 상태별 조건부 클래스를 체계적으로 관리한다.
   • React Aria의 유연성과 Radix의 단순함을 조합한 최적의 중간 지점을 제공한다.
6. 08:27 - 09:12

   Base UI 도입 전략 및 결론

   유저 요청과 GitHub 커뮤니티 피드백에 신속히 대응하고 있어 폼 라이브러리 연동이나 애니메이션 처리가 수월하다. 기존 Radix 기반 앱의 강제 마이그레이션보다는 신규 서비스 개발 및 고급 UI 요구사항 발생 시 Base UI로 전환하는 전략이 효율적이다.

   • React Hook Form, TanStack Form, 중첩 다이얼로그 및 애니메이션 통합을 원활히 지원한다.
   • 기존에 잘 동작하는 Radix 프로젝트를 무리하게 즉시 이관할 필요는 없다.
   • 신규 프로젝트 구축 시 또는 콤보박스 등의 기능이 필요할 때 우선 도입을 권장한다.