스크롤 방향 커스텀 훅

1 minute read

2024-07-28

코드

useScrollDirection.ts

function useScrollDirection() {
  const { scrollY } = useScroll();
  const [direction, setDirection] = useState<'up' | 'down'>('down');
  
  
  useMotionValueEvent(scrollY, 'change', (latest) => {
    const prev = scrollY.getPrevious() ?? latest
    
    if (latest > prev) {
      setDirection('down')
    } else if (latest < prev) {
      setDirection('up')
    }
  })
 
  return direction;
}

direction 이 문자열로 지정해서 참고가 아닌 primitive 이므로 setter 를 호출하더라도 항상 렌더링 되지 않는다. (다만 비교 phase 는 진행됨)

반환하는 값은 up | down 으로 이를 이용해서 effect 로직을 작성할 수 있다.

scroll direction example

function MyComponent() {
  const direction = useScrollDirection(); // 'up' | 'down'
  
  useEffect(() => {
    if(direction === 'up') {
      // ...
    }
  }, [direction])
}