[react] 윈도우 스크롤 모니터 (html window scroll state monitor) 샘플 코드 (with lodash 스로틀링(throttle))

개요

• 보통은 react-use의 useWindowScroll 로 충분하다.
• 그러나 이번에 작업하는 컴포넌트는 소형 컴포넌트로, 한 페이지 내에 다수가 들어갈 수 있어서 성능을 위해 scroll event에 throttle 처리를 해 주고 싶었음

소스

export const useWinScroll = ({ throttleInterval = 50 }) => {
  const [scrollX, setScrollX] = useState(window.scrollX);
  const [scrollY, setScrollY] = useState(window.scrollY);
  // dc(`## scrollY: [${scrollY}]`);
  useEffect(() => {
    // dc(`>> useWinScroll mount !`);
    const handleScroll = _.throttle(() => {
      setScrollX(window.scrollX);
      setScrollY(window.scrollY);
    }, throttleInterval);
    window.addEventListener('scroll', handleScroll);
    return () => {
      // dc(`<< useWinScroll unmount !`);
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  return { scrollX, scrollY };
};