pmndrs/use-gesture

개요 React와 Vanilla JavaScript에서 마우스/터치 제스처를 컴포넌트에 바인딩하는 유틸리티 라이브러리다. 드래그, 핀치, 스크롤, 휠 등 다양한 제스처를 선언적으로 처리할 수 있다. 9,500+ stars를 보유한 pmndrs 생태계의 핵심 라이브러리다.

핵심 내용 `useDrag`, `usePinch`, `useScroll`, `useWheel`, `useHover`, `useMove` 등 각 제스처별 훅을 제공한다. react-spring과 함께 사용하면 물리 기반 애니메이션과 결합된 자연스러운 인터랙션을 구현할 수 있다. 성능 최적화를 위해 RAF(requestAnimationFrame) 기반으로 동작한다.

기존 대비 차별점 브라우저 기본 이벤트 핸들러의 복잡성을 추상화하고, 멀티터치 제스처와 마우스 제스처를 통일된 API로 처리한다. react-spring, @react-three/fiber와 완벽하게 통합되어 3D 인터랙션도 쉽게 구현할 수 있다.

활용 가능성 드래그앤드롭 UI, 카드 스와이프, 이미지 줌, 3D 오브젝트 조작, 인터랙티브 데이터 시각화 등 다양한 제스처 기반 인터랙션 구현에 활용할 수 있다.

참고 자료 - 원본