Radix UI로 Headless UI 맛보기

😐Radix UI는?

흔하게 Headless UI 라이브러리라고 부르곤 하는 라이브러리입니다.

쉽게 이야기하면 디자인 없이 기능만 제공해주는 라이브러리라고 생각할 수 있습니다.

기능 없이 디자인만 제공해주는 라이브러리들의 대척점에 있다고도 생각할 수 있어요

 

다양한 UI/UX 기능들을 높은 퀄리티로 어떤 CSS 도구와도 통합할 수 있게 제공해주는

Radix UI는 개발자의 생산성을 크게 향상시켜줄 수 있는 도구입니다.

https://www.radix-ui.com/docs/primitives/overview/getting-started

Getting started – Radix UI

Radix UI 설치방법

npm install @radix-ui/react-popover@latest -E

공식문서를 따라서 위와 같이 인스톨해줍니다.

 

😅Radix UI 사용법

공식문서의 예제가 너무 잘되어있어서

그냥 따라가기만해도 충분합니다.

거기에 사용방법도 직관적이어서 한두번만 해보면 금방 감을 잡을 수 있겠네요

 

가장 기본적인 popover 예제를 따라 작성해보겠습니다.

import { Button } from '@mui/material';
import * as Popover from '@radix-ui/react-popover';
import '@/styles/reset.css';
import '@/styles/index.css';
const App = () => {
  return (
    <div>
      <Popover.Root>
        <Popover.Trigger>
          <Button>엄준식</Button>
        </Popover.Trigger>
        <Popover.Portal>
          <Popover.Content>이안에 어떤 내용을 적어주면됩니다.</Popover.Content>
        </Popover.Portal>
      </Popover.Root>
    </div>
  );
};

export default App;

이렇게 react-popover에서 모든 요소를 import 해온 뒤

.Root

.Trigger

.Portal

.Content 를 활용하여 작성해줍니다.

이름만 봐도 너무 직관적인게 참 잘만들었다 싶네요

Root 는 팝오버의 시작점

trigger는 팝오버를 보여줄 이벤트가 될것이고요

내부적인 스타일링은 되어있지않은 상태이기때문에

내부에 스타일을 넣어주기 위해 mui에서 버튼을 가져왔습니다.

그전에 reset.css가 안되어있으신분들은

button {
  all: unset;
}

을 추가하여주세요

버튼을 클릭하면 우리가 portal 안에 적어두었던 내용이 보여집니다

다시 누르면 popover 창이 닫히게되어요!

직접 구현하려면 상당히 귀찮은 css 가 들어가게되는데 편리하네요

---

😁애니메이션을 넣어 생기를 불어넣어주자

이렇게 팝오버에 애니메이션을 달아주도록 하겠습니다.

예제는 fadein / fadeout으로 구현했지만 다른 애니메이션을 넣어줘도 좋습니다.

어떻게 구현할 수 있을까요?

https://www.radix-ui.com/docs/primitives/guides/animation#delegating-unmounting-for-javascript-animation

Animation – Radix UI

공식문서 예제를 참고해보면 data 선택자를 이용하여 구현하는 방법을 보여줍니다.

이를 활용해서 예제를 만들어봅시다.

공식 예제는 다이얼로그로 예제가 만들어져있지만

이번에는 앞서 구현한 팝오버에 달아주는 형태로 구현하겠습니다.

 

먼저 위 gif의 개발자도구 탭을 자세히 살펴보고 와주세요

잘 살펴보면 팝오버가 트리거되었을때

data-state 속성이 open / closed로 변화하는것을 확인할 수 있습니다.

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

데이터 attributtes가 익숙하지 않다면 위 문서를 참고해주세요

간단하게 생각하면

data- 로 시작하는 속성 안에 값을 넣어줄 수 있는 것입니다.

중요한것은 이 attributes는 css에서도 접근해서 사용할 수 있다는 점이죠!

 

animation.css

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fadeinout[data-state='open'] {
  animation: fadein 1000ms ease-out;
}

.fadeinout[data-state='closed'] {
  animation: fadeout 1000ms ease-in;
}

keyframes를 이용하여 fadein과 fadeout을 하는 애니메이션을 각각 만들어주었습니다.

그리고 data-state가 open일때에는 fadein 애니메이션을

date-state가 closed일때에는 fadeout 애니메이션을 보여주도록 css를 작성해줬어요

import { Button } from '@mui/material';
import * as Popover from '@radix-ui/react-popover';

const PopoverExample = () => {
  return (
    <Popover.Root>
      <Popover.Trigger>
        <Button variant="contained">엄준식</Button>
      </Popover.Trigger>

      <Popover.Portal>
        <Popover.Content className="fadeinout">
          이안에 어떤 내용을 적어주면됩니다.
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
};

export default PopoverExample;

컴포넌트로 만들어서 작성했습니다.

이렇게하면 조금 복잡할 수 있는 내용들이 하나의 요소로 감추어질 수 있겠죠?

 

이제 우리가 페이드인아웃을 적용시켜주고 싶은 요소에 class를 주겠습니다.

물론 css는 import되어있어야해요

저는 main.tsx와 같이 최상위에서 css를 import하고 있기때문에 적용됩니다.

main.tsx
import '@/styles/animation.css';

css를 import 한 뒤 시도해주세요

---

🙄마치며

사용이 직관적이고 공식문서가 워낙 잘되어있어서

쉽게 학습하여 사용할 수 있는 라이브러리입니다.

 

개인적인 바람으로는 라이브러리들 전부 radix와 같은 형태로

튜토리얼이 있었으면 참 좋겠다는 생각이 드네요...