React useGesture 훅 설계: 부드러운 UI/UX를 위한 제스처 처리 기술

useRef: 상태 변경 시 리렌더링을 발생시키지 않아, 터치(Touch) 이벤트 발생 시 불필요한 렌더링(Re-rendering)을 방지

지수 이동 평균(Exponential Moving Average): 터치 이벤트의 불규칙성을 보정하여, 부드러운 스크롤(Scroll) 동작을 구현

will-change: transform: 드래그(Drag) 중 GPU 레이어(Layer)를 활성화하여, 레이아웃(Layout) 및 페인트(Paint) 과정을 건너뛰어 성능을 향상

이벤트 시스템 차이점: 터치 이벤트와 마우스 이벤트의 시작, 이동, 종료 이벤트가 다르므로, 각 시스템에 맞는 핸들러(Handler)를 구현

getClientY 함수: 터치 이벤트와 마우스 이벤트에서 Y 좌표를 추출하는 방식을 통합하여, 코드 중복을 제거

passive 옵션: touchstart 이벤트에는 passive: true를, touchmove 이벤트에는 passive: false를 설정하여, 스크롤(Scroll) 성능을 최적화

canDragFromScrollable 콜백: 호출자가 스크롤 영역에서의 드래그 허용 여부를 결정할 수 있도록, 유연성을 제공

이벤트 제어: 스크롤 영역에서 아래로 드래그 시, scrollTop이 0이면 드래그를 허용하고, 그렇지 않으면 스크롤 동작을 유지

마우스 이벤트 차단: 마우스 환경에서 스크롤 영역 내 드래그를 막아, 예상치 못한 동작을 방지

stale closure 문제: onDragEnd와 같은 인라인 함수(Inline Function)를 사용할 때, ref를 사용하여 최신 함수를 참조하도록 해결

useEffect 의존성 배열: enabled, targetRef, scrollableRef, handleRef, rubberBand와 같은 의존성(Dependency)이 변경될 때, effect를 재실행하여 최신 값을 반영

엣지 케이스 처리: 다양한 상황에서 발생할 수 있는 버그(Bug)를 예방하기 위해, transform 초기화, touchcancel 처리, scrollTop 소수점 처리 등 꼼꼼한 검증 수행