데브허브 | DEVHUB | Add custom links to Clerk's UserButton componentAdd custom links to Clerk's UserButton component
- Clerk의 UserButton 컴포넌트에 사용자 정의 메뉴 항목을 추가하는 방법을 설명합니다. ⚙️
- UserButton은 아바타와 드롭다운 메뉴를 렌더링하는 Clerk UI 컴포넌트입니다. 👤
- 드롭다운 메뉴에 추가할 수 있는 두 가지 유형의 사용자 정의 항목이 있습니다: 액션 버튼과 링크. 🔗
- 액션 버튼은
onClick 함수를 통해 특정 동작을 트리거하며, 페이지 이동이 아닌 대화 상자 열기 등에 사용됩니다. 💬
- 링크는
UserButton.Link 컴포넌트를 사용하여 특정 페이지로 사용자를 안내하며, href, label, icon 속성을 가집니다. ➡️
- 사용자 정의 항목을 추가하려면 UserButton 컴포넌트의 자식으로 해당 항목을 전달합니다. ➕
- '계정 관리' 및 '로그아웃'과 같은 기본 메뉴 항목은 자동으로 표시되며, 필요시 재정렬할 수 있습니다. 🔄
- 실제 애플리케이션에서 사용자 정의 Clerk 컴포넌트를 생성하여 UserButton을 렌더링하고 사용자 정의 링크를 추가하는 과정을 시연합니다. 💻
- 다음 비디오에서는 사용자 프로필에 사용자 정의 페이지와 탭을 추가하는 방법을 다룰 예정입니다. 🚀