[React] lodash throttle 로 DOM event 제어하기

🍉effy·2022년 9월 30일
0
post-custom-banner

스크롤이 생길 경우 상단으로 스크롤 이동 시킬 버튼,
스크롤 이벤트가 빠른 속도로 실행될 ,, 경우이기 때문에 DOM event 를 제어하여 구현해야 한다.


예를 들어 어떤 스크롤 위치부터 한 헤더가 렌더링 되게끔 하고 싶을 때

이렇게 하면 scrollY 위치가 조금이라도 변경이 될 때도 이벤트가 실행된다.
불필요한 리렌더링을 막기 위해 제어 과정을 거쳐야 한다.

빠른 속도로 실행되는 스크롤 이벤트를 제어하는 방식으로 lodash/throttle 를 사용했다


const [scroll, setScroll] = useState(false);

const updateScroll = () => {
	const { scrollY } = window;
    return scrollY > 10 ? setScroll(true) : setScroll(false);
};

const handleScroll = throttle(updateScroll, 100);


  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  

이렇게 스크롤 이벤트가 특정 시간동안 한번만 실행될 수 있도록 한다.

이 로직을 가지고 재사용이 가능하도록 custom hook 으로 만들어 사용.


 function TopButton() {
  const scroll = useScroll(false);

  const moveOnTop = () => {
    document.documentElement.scrollTop = 0;
  };
  
  return scroll ? <Button />
  

custom hook으로 사용해서 계속 실행되지 않게 제어하여
스크롤 상단으로 올라가는 버튼 완성.
쉬움...
custom hook 으로 만들어놔서 이전에 했던 헤더 같은 경우도 이런식으로 효율적으로 관리하면 된다.

profile
Je vais l'essayer
post-custom-banner

0개의 댓글