@radix-ui/react-popper 라이브러리 코드를 살펴본다. 용도 Anchor를 클릭했을 때, 해당 Anchor에 연결되어있는 UI를 렌더링할 수 있으며, Viewport와의 Collision을 감지하여 자동으로 콘텐츠 위치가 조절된다. 연결되어있는...
@radix-ui/react-dismissable-layer 라이브러리 코드를 살펴본다. 용도 현재 레이어와 분리된 UI 레이어를 렌더링할 수 있고, 외부 레이어와 인터랙션 할 때 제거할 수 있는 컴포넌트이다. 이와 같이 열고 닫는 방식의 사용 방법은 모달이나 팝오버...
@radix-ui/react-focus-scope 라이브러리 코드와 TreeWalker Wep API를 살펴본다. 용도 FocusScope이 mount될 때, 내부의 첫번째 Focusable한 엘리먼트에 focus된다. FosucScope이 unmount될 때,...
@radix-ui/react-checkbox 라이브러리 코드를 살펴본다. 추가적으로 WAI-ARIA에서 소개하는 체크박스 패턴에 대해 알아본다. Checkbox Pattern (WAI-ARIA) 여기에서 자세한 내용을 확인할 수 있다. WAI-ARIA의 Checkbox...
@radix-ui/react-use-controllable-state 라이브러리 코드를 살펴보고, controlled, uncontrolled에 대해 알아본다. 용도 useControllableState는 Consumer가 상태를 제어하고자 하면, Consumer에게...
@radix-ui/react-presence 라이브러리 코드를 살펴본다. 용도 리액트 컴포넌트가 unmount될 때 애니메이션을 재생하려면 unmount되는 시점을 제어할 수 있어야 한다. Presence컴포넌트는 해당 기능을 구현하여 unmount 애니메이션을 쉽게...
