Symbol
[React] Drawer UI(사이드바 메뉴) 애니메이션 구현하기
@shinyongjun/react-transition 을 사용하여 Drawer UI 애니메이션을 구현하는 방법입니다.
2024-02-25
Drawer UI는 모바일 처럼 작은 디바이스 환경에서 많은 네비게이션을 제공하고 싶을 때 주로 사용되며 어느 정도 규모가 있는 플랫폼이나 포탈 사이트에서는 거의 대부분 볼 수 있습니다.
이번 포스팅에서는 제가 직접 제작한 @shinyongjun/react-transition 라이브러리를 사용하여 Drawer UI 애니메이션을 구현해 보겠습니다.
Material Drawer 디자인
Material Drawer 디자인

Header, Opener

Drawer UI의 Opener는 통상적으로 Header 혹은 Footer와 같이 모든 페이지에 존재하는 컴포넌트에 위치시킵니다. 간단하게 마크업과 스타일을 입혀주겠습니다.
App.tsx

style.css

Drawer, Closer, setState

Drawer, Closer의 마크업과 스타일을 입혀주고 Opener와 Closer 버튼에 onClick 이벤트를 걸어줍니다.
showDrawer 상태는 Drawer의 노출 여부를 결정합니다.
App.tsx

style.css

@shinyongjun/react-transition

이제 react-transition 라이브러리를 설치하고 Drawer UI에 적용하겠습니다.

설치한 라이브러리에서 <Transition /> 컴포넌트를 불러와 Drawer 요소 태그와 치환해 주고 CSS를 추가하면 애니메이션과 함께 Drawer UI가 등,퇴장 합니다.
App.tsx

Drawer를 왼쪽에서 등장 시키고 싶다면 transform 속성값에 translateX(-100%) , 오른쪽에서 등장 시키고 싶다면 translateX(100%) 를 할당합니다.
style.css

---
2024-02-28
라이브러리 버전이 올라가면서 사용법이 변경되어 예제와 포스팅 내용이 일부 변경되었습니다.