React Tab1 React - Tab 컴포넌트 만들기 이전에 블로그에 적었던 버튼 클릭 후 원하는 컴포넌트를 렌더링 하는 방법을 고도화했어요 구현 목표 - Headless 기반으로 제작하여 원하는 방식으로 스타일을 지정할 수 있도록 대응 - 키보드 이벤트를 추가해서 화살표 이동에 따라 TabItem이 Focus가 되어 해당 Tab의 값에 따라 원하는 컴포넌트를 렌더링 구현 방식 밖에서 버튼의 Ref에 접근하기 위해 forwardRef를 사용합니다. 컴포넌트의 interface는 HTML의 Button의 기본 타입을 사용할 수 있도록 ButtonHTMLAttributes 을 확장해서 사용합니다. 시맨틱 한 코드를 위해 button element에 role을 부여해서 tab이란 것을 알립니다. onKeyDown이벤트에 ArrowRight, ArrowLeft 일.. 2023. 9. 23. 이전 1 다음
