디바운씽(debouncing)

현재 내가 진행한 프로젝트에는 무한스크롤을 스크롤 이벤트로 만들어 두었다. 이 코드에 문제가 하나 있는데 서버에 요청을 보낼때 여러 번의 요청이 한번에 간다는 것이다. 이 문제를 해결하는 방법을 구글링하니 디바운씽과 쓰로틀링을 찾을 수 있었다. 둘 다 이벤트의 성능을 최적화 하기 위해 사용되는 기법 중 하나이다. 이번 포스트에서는 디바운씽을 설명하고 다음 포스트에는 쓰로틀링을 설명할 것이다.

---

디바운씽(debouncing)

디바운씽은 채터링(chattering)이라는 현상을 방지하기 위해 사용한다. 채터링이란 스위치 같은 것이 매우 빠른 속도로 온, 오프를 반복해 여러번 스위치가 켜지는 현상을 말한다. 이 현상을 프로그램 측면에서 보자면 데이터를 요청할 때 채터링이 발생한다면 똑같은 요청을 여러 번 보낸다는 말이다. 여기에 디바운씽을 적용한다면 여러 번 데이터 요청을 보내려고 실행한 함수 중에 가장 마지막 함수만 실행되어 데이터 요청을 한번 보낼 수 있어서 성능 향상을 기대 할 수 있다.

 

const [timer, setTimer] = useState(false);

const handleDebounce () => {
  if (timer) clearTimeout(timer);
  setTimer(true);
  setTimeout(() => {
    console.log('요청!');
    setTimer(false);
  }, 500);
});

 

디바운씽의 구현에는 setTimeout함수와 setTimeout함수의 콜백함수가 실행 여부를 나타내는 timer라는 상태가 필요하다. setTimeout함수는 지정한 시간이 지나면 실행되는 콜백함수와 지연되는 시간을 인자로 갖는다.

 

handleDebounce의 함수가 실행되면 timer의 상태가 true로 업데이트 되고 setTimeout함수가 실행된다. 0.5초 동안의 딜레이가 생기는데 이 사이에 함수가 다시 호출이 된다면 기존에 있던 setTimeout함수를 제거하고 다시 setTimeout함수를 실행하게 되어 결과적으로는 setTimeout함수의 콜백 함수가 한번 실행하게 된다.

 

찾아보니 디바운씽은 주로 검색을 요청 보낼 때 글자 하나하나마다 요청을 보내지 않고 마지막 글자를 작성하고 일정한 시간만큼 딜레이가 된 후에 요청을 보내도록 할 경우 많이 쓰이는 듯하다!

 

---

출처

• https://guiyomi.tistory.com/122
• https://terms.naver.com/entry.naver?cid=50324&docId=1595169&categoryId=50324