디바운싱(Debouncing)으로 과도한 이벤트 발생 방지하기

🥹 문제 발생

wheel 이벤트를 적용하는 과정에서 스크롤을 하면 튕기면서 두 페이지씩 내려가는 문제가 발생하였다 ..

 

🤔 문제 원인

스크롤 이벤트가 과도하게 발생하면서 한 번의 스크롤 동작에도 여러 번 트리거 되어 튕기며 두 페이지씩 넘어가는 현상이 생기는 것이었다.

 

👍🏻 해결 방법

디바운싱을 적용해 주어 지정된 시간 동안 이벤트가 한 번만 실행되도록 제한을 해주었다.

 

1. 먼저 useRef를 이용해 스크롤의 상태를 추척해준다.

const isScrolling = useRef(false);

 

2. 스크롤 이벤트 함수에 true로 변경하여 스크롤 중 상태로 설정해 준다.

isScrolling.current = true;

 

3. setTimeout을 이용해 일정 시간 후 스크롤 가능 상태로 변경해 준다.

 setTimeout(() => {
        isScrolling.current = false;
      }, 1200);
    };

 

디바운싱을 적용하게 되면서 스크롤 이벤트가 잦게 발생하는 문제를 해결하였고 이를 통해 scrollTop 위치를 자주 수정하면서 발생하던 불필요한 렌더링도 줄일 수 있었습니다!

 

 

해결 완료 😚