ReactUse 훅이 순수 React 코드로 스크롤 추적, 잠금, 스무스 스크롤, 고정 감지, 가시성 감지, 인터섹션 관찰 기능을 대폭 간소화한다

Context

React에서 스크롤 효과를 구현하려면 addEventListener, IntersectionObserver, overflow 스타일, 수많은 엣지 케이스를 직접 처리해야 한다. 대부분의 개발자들은 무거운 애니메이션 라이브러리를 사용하거나 부서지기 쉬운 명령형 코드를 수시간 작성한다. 이 방식은 성능 최적화와 SSR 호환성 측면에서도 도전 과제를 안고 있다.

Technical Solution

• useScroll → 수동 이벤트 연결, 방향 추적, 가장자리 감지를 하나의 훅 호출로 대체한다.
• useScrollLock → body overflow hidden 토글, 스크롤 위치 보존 로직을 자동 처리한다.
• useSmoothScroll → scrollTo API 래핑으로 부드러운 스크롤 이동을 구현한다.
• useSticky → sticky 위치 감지를 추상화하여 고정 헤더 등에 활용한다.
• useElementVisibility → showAtVisible 옵션으로 요소 가시성 상태를 감지한다.
• useIntersectionObserver → 직접 observer 생성 없이 인터섹션 감지 로직을 제공한다.

Impact

스크롤 이벤트 핸들러 20줄 이상의 수동 코드가 1줄 훅 호출로 축소된다. throttle 옵션 내장으로 rapid-fire 스크롤 시 성능 저하 방지.

Key Takeaway

복잡한 브라우저 API를 훅으로 추상화하면 명령형 코드를 선언형으로 전환하면서도 단일 책임 원칙을 유지할 수 있다.