Mmjsdoinmjsdo.hashnode.dev·Apr 16, 2024 · 6 min read(오픈소스 분석) Radix Popper@radix-ui/react-popper 라이브러리 코드를 살펴본다. 용도 Anchor를 클릭했을 때, 해당 Anchor에 연결되어있는 UI를 렌더링할 수 있으며, Viewport와의 Collision을 감지하여 자동으로 콘텐츠 위치가 조절된다. 연결되어있는 Anchor를 가리키기 위한 Arrow도 표현 가능하다. 구조 <Popper.Root> <Popper.Anchor>open</Popper.Anchor> <Popper.Content...00
Mmjsdoinmjsdo.hashnode.dev·Mar 27, 2024 · 7 min read(오픈소스 분석) Radix DismissableLayer@radix-ui/react-dismissable-layer 라이브러리 코드를 살펴본다. 용도 현재 레이어와 분리된 UI 레이어를 렌더링할 수 있고, 외부 레이어와 인터랙션 할 때 제거할 수 있는 컴포넌트이다. 이와 같이 열고 닫는 방식의 사용 방법은 모달이나 팝오버 같은 UI에 응용할 수 있다. Context DismissableLayer의 컨텍스트는 내부 상태를 저장하는 용도로 사용되지 않고, 렌더링된 모든 DismissableLayer엘리...00
Mmjsdoinmjsdo.hashnode.dev·Mar 2, 2024 · 6 min read(오픈소스 분석) Radix FocusScope@radix-ui/react-focus-scope 라이브러리 코드와 TreeWalker Wep API를 살펴본다. 용도 FocusScope이 mount될 때, 내부의 첫번째 Focusable한 엘리먼트에 focus된다. FosucScope이 unmount될 때, mount되기 직전에 focus를 받았던 엘리먼트에 focus된다. FocusScope내부에 focus를 가두거나, loop시킬 수 있다. 구현 FocusScope컴포넌트는...00
Mmjsdoinmjsdo.hashnode.dev·Feb 18, 2024 · 4 min read(오픈소스 분석) Radix Checkbox@radix-ui/react-checkbox 라이브러리 코드를 살펴본다. 추가적으로 WAI-ARIA에서 소개하는 체크박스 패턴에 대해 알아본다. Checkbox Pattern (WAI-ARIA) 여기에서 자세한 내용을 확인할 수 있다. WAI-ARIA의 Checkbox Pattern에선 Accessible한 UI를 만들기 위한 어트리뷰트 및 키보드 인터랙션 가이드와 체크박스의 타입을 소개한다. 여기서 알아볼 것은 체크박스의 타입이다. 두 가지 ...00
Mmjsdoinmjsdo.hashnode.dev·Feb 3, 2024 · 5 min read(오픈소스 분석) Radix useControllableState@radix-ui/react-use-controllable-state 라이브러리 코드를 살펴보고, controlled, uncontrolled에 대해 알아본다. 용도 useControllableState는 Consumer가 상태를 제어하고자 하면, Consumer에게 상태 관리를 위임하고 Consumer가 상태를 제어하지 않고자 하면, 내부적으로 상태를 관리하기 위한 커스텀 훅이다. Consumer 입장에서 1번의 경우를 controll...00
