RadixUI란?

개요

A 페이지는 Mui같은 라이브러리 써서 간단하게 구현할 거고, B 페이지는 Radix ui에 Tailwind Css 붙여서 디자인할 거 예요.

곧 진행할 프로젝트의 PM님이랑 얘기 나누다가 들은 이야기 중 일부다.
분명 입사할 때 즈음에 프론트엔드 생태계에 대한 전반적인 이야기를 들을 때 모두 들어본 단어이긴한데, 정확히 어떤 차이가 있고, 특히 FE를 아예 안 건드려 본 나로써는 처음 본 영단어 외우듯이 노트에 받아 적기 바빴다.

Radix ui가 뭔데

Radix ui에서 제공하는 라이브러리는 크게 Themes, Primitives, Icons, Colors가 있는데, 보통 얘기하는 Radix ui는 Radix/Primitives를 이야기한다.

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

Radix Primitives 공식 문서 가장 첫 번째 줄에 있는 문장이다.

• Low-level UI Component: 가장 낮은 단계의 UI 컴포넌트. 즉, 복잡하고 여러 기믹이 들어간 화려한 기능을 제공하는 것이 아니라, 가장 기본적인 기능만 제공한다.

• Focus on accessibility, customization, developer experience: 접근성(웹 표준), 커스텀과 개발자 경험에 집중한다. 즉, 웹표준을 준수하는 것에 집중하고, 커스터마이징을 폭넓게 지원해서 개발자의 사용 경험에 좋다.

조금 뜬 구름 잡는 소리 같아 보여서, 정리해서 한 줄로 요약해보면

💡

Radix ui의 Primitives는 Headless UI 라이브러리로, css같은 세부 스타일링 기능은 제공하지 않고, 컴포넌트의 고유 기능만 제공하는 Low-level UI 라이브러리이다.

그래서 왜 쓰는데

쌩 구현

당장 Dropdown Menu을 구현한다고 해보자.

1. Dropdown을 trigger할 버튼(DropdownButton)을 놔둔다.

2. DropdownButton 클릭 시 나타난 Menu를 display: none상태로 놓아둔다.

3. DropndownButton 클릭 시 Menu를 display: block 으로 바꿔야하기 때문에 관리할 state를 추가한다.

4. 위 동작을 DropndownButton의 이벤트에 바인딩한다.

간단하게 구현해야할 내용을 나열해보았는데, 드랍다운을 버튼 바로 아래에 위치 시킬지, 버튼의 right에 위치시킬지 등 세부적인 옵션을 추가하다 보면 간단한 Dropdown Menu임에도 불구하고, 공수가 많이 들 수 있다.

UI 컴포넌트 라이브러리

그래서 사용하는게 Mui, Antd, Bootstrap같은 UI 컴포넌트 라이브러리이다.

하지만 이런 UI 컴포넌트 라이브러리의 단점?은 자체적인 css가 적용되어 있다는 것이다. 물론, 커스터마이징을 지원하지만, 개발하다 보면 내가 원하는 부분을 커스터마이징 하려면 결국 css를 덮어씌어야하는 경우가 상당히 많이 발생한다(당장 지금 진행중인 프로젝트만 해도 Antd에 tailwind를 덮어씌워놔서 css 수정하는게 지옥에 가깝다).

Headless UI 라이브러리

그래서 등장한 것이 Headless UI 라이브러리(css는 제공하지 않고, 기능만 제공하는 라이브러리)다.

당장 Radix UI로 위에서 예시로 든 Dropdown Menu를 구현해보자.

const DropdownMenu = () => {
	return (
		<DropdownMenu.Root>
			<DropdownMenu.Trigger>
				<button>[드랍다운]</button>
			</DropdownMenu.Trigger>
			
			<DropdownMenu.Portal>
				<DropdownMenu.Content>
					{/*드랍다운 메뉴 내용*/}
				</DropdownMenu.Content>
			</DropdownMenu.Portal>
		</DropdownMenu.Root>
	);
};

State 없이 바로 구현이 가능하다(엑센 팡션? 그런거 쓰지마세요). 즉, 기능은 라이브러리가 구현해줄테니, 우리는 세부 구성과 css에 집중해도 된다.

실제로 위 코드 그대로 적용하면, css가 하나도 입혀지지 않은 ui가 나온다.

정리

💡

Headless ui 라이브러리인 Radix ui는 css가 입혀지지 않은, 기능만 제공하는 ui 라이브러리이다.
개발자는 Radix ui를 통해 컴포넌트의
기능을, tailwind css와 같은 라이브러리를 통하여 컴포넌트의 디자인을 입힐 수 있다.
이를 통해 기존의 Mui, Antd, Bootstrap 같은 디자인 무드가 정해져 있는 UI 컴포넌트 라이브러리와 달리,
웹 디자인 톤을 통일시킬 수 있다는 장점이 있다.

Uploaded by N2T

(24.02.17 03:21)에 작성된 글 입니다.