Search for a command to run...
@radix-ui/react-popper 라이브러리 코드를 살펴본다. 용도 Anchor를 클릭했을 때, 해당 Anchor에 연결되어있는 UI를 렌더링할 수 있으며, Viewport와의 Collision을 감지하여 자동으로 콘텐츠 위치가 조절된다. 연결되어있는 Anchor를 가리키기 위한 Arrow도 표현 가능하다. 구조 <Popper.Root> <Popper.Anchor>open</Popper.Anchor> <Popper.Content...
@radix-ui/react-dismissable-layer 라이브러리 코드를 살펴본다. 용도 현재 레이어와 분리된 UI 레이어를 렌더링할 수 있고, 외부 레이어와 인터랙션 할 때 제거할 수 있는 컴포넌트이다. 이와 같이 열고 닫는 방식의 사용 방법은 모달이나 팝오버 같은 UI에 응용할 수 있다. Context DismissableLayer의 컨텍스트는 내부 상태를 저장하는 용도로 사용되지 않고, 렌더링된 모든 DismissableLayer엘리...
@radix-ui/react-focus-scope 라이브러리 코드와 TreeWalker Wep API를 살펴본다. 용도 FocusScope이 mount될 때, 내부의 첫번째 Focusable한 엘리먼트에 focus된다. FosucScope이 unmount될 때, mount되기 직전에 focus를 받았던 엘리먼트에 focus된다. FocusScope내부에 focus를 가두거나, loop시킬 수 있다. 구현 FocusScope컴포넌트는...
@radix-ui/react-checkbox 라이브러리 코드를 살펴본다. 추가적으로 WAI-ARIA에서 소개하는 체크박스 패턴에 대해 알아본다. Checkbox Pattern (WAI-ARIA) 여기에서 자세한 내용을 확인할 수 있다. WAI-ARIA의 Checkbox Pattern에선 Accessible한 UI를 만들기 위한 어트리뷰트 및 키보드 인터랙션 가이드와 체크박스의 타입을 소개한다. 여기서 알아볼 것은 체크박스의 타입이다. 두 가지 ...
@radix-ui/react-use-controllable-state 라이브러리 코드를 살펴보고, controlled, uncontrolled에 대해 알아본다. 용도 useControllableState는 Consumer가 상태를 제어하고자 하면, Consumer에게 상태 관리를 위임하고 Consumer가 상태를 제어하지 않고자 하면, 내부적으로 상태를 관리하기 위한 커스텀 훅이다. Consumer 입장에서 1번의 경우를 controll...
@radix-ui/react-presence 라이브러리 코드를 살펴본다. 용도 리액트 컴포넌트가 unmount될 때 애니메이션을 재생하려면 unmount되는 시점을 제어할 수 있어야 한다. Presence컴포넌트는 해당 기능을 구현하여 unmount 애니메이션을 쉽게 추가할 수 있다. 사용 예시 const Component = () => { const [present, setPresent] = useState(true); return (...
@radix-ui/react-slot 라이브러리 코드를 살펴본다. 용도 <Slot />은 전달된 props를 child에 merge하는 컴포넌트이다. const a: number = 10; <Slot onClick={()=>{ console.log('logged second') }}> <div onClick={()=>{ console.log('logged first') }}> 컴포넌트 </div> </Slot> 이 특성을 ...
여러 프로젝트에서 재사용되는 코드는 매번 바닥부터 작성하는것보단, 이왕이면 라이브러리로 배포하는게 편할 수 있다. 언어마다 다르지만, node생태계에선 npm이라는 라이브러리 저장소가 존재하고, 만든 라이브러리는 여기에 쉽게 배포할 수 있다. 이 글에선 패키지를 만드는 방법과 changesets를 사용하여 changelog관리 및 배포 과정을 자동화하는 방법을 다룬다. 패키지 만들기 node에서는 라이브러리 대신 패키지라는 용어를 사용한다. 패...
리액트엔 컴포넌트의 props가 변경될 때 리렌더링이 발생한다는 규칙이 있다. props를 원시값으로 가정하면 당연히 그러는게 타당하다고 생각할 수 있지만, props가 객체나 함수인 경우엔 불필요하게 리렌더링이 발생하는 경우가 생긴다. const Component = (props) => { const callback = () => {}; const object = { a: 1 }; return ( <Child callbac...