React Debounce개념

 

 

이전 포스팅에서 Throttle에 대해 알아보았는데, 

 

이번에는 비슷하면서도 약간 다른 Debounce에 대해 알아보자. 

 

구글에 Debounce에 대해 검색하면 아래와 같은 이미지가 나온다. 

 

 

Debounce란 개념은 전자공학에서 나온 개념인데, 

 

예를 들어 리모콘 버튼을 누를 때, 사람 입장에서는 한번만 딸깍 하고 누르는 것 같지만, 

 

내부적으로는 수많은 On / Off 신호들이 발생된다고 한다. 

 

그래서 연속된 신호들이 이어져서 나타났을 때 마지막 신호만을 인정하고 나머지는 무시하는 것을 Debounce라고 한다.

 

React에서도 마찬가지의 개념으로 쓰인다. 

 

이 부분도 잘 정리된 블로그가 있어서, 번역하여 올려둔다. 

 

원본은 아래와 같다.

https://www.freecodecamp.org/news/javascript-debounce-example/

Debounce – How to Delay a Function in JavaScript (JS ES6 Example)

 

Debounce in JavaScript

 

검색 추천 기능을 만드는데, 사용자가 입력을 마치면 추천을 보여주길 원한다고 가정 해보자.

 

혹은, 매번 파일을 데이터베이스에 저장하기에는 비용이 드니까 일정시간 유저가 활발하게 작업하고 있지 않을 경우에만 저장하기 기능이 작동되도록 하고싶다.

 

그리고 개인적으로 제일 좋아하는 더블클릭 기능. 

 

위와 같은 기능들이 바로 Debounce 함수를 활용한 기능들이다. 

 

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

 

이것을 input으로 활용할 수도 있고, 

 

<input type="text" onkeyup="processChange()" />

 

혹은 Button,

 

<button onclick="processChange()">Click me</button>

 

혹은 Window Event

 

window.addEventListener("scroll", processChange);

 

혹은 simple JS 함수와 같이 다른 엘리먼트로 이요할 수 있다. 

 

그래서 방금 어떤 일이 일어났는가? Debounce는 두가지 일을 다루는 특별한 함수다. 

 

• timer 변수의 스코프 할당
• 특정한 시간에 발동되는 함수 스케쥴링

글로 풀어서 한번 설명해 보자.

 

방문자가 첫번째 글자를 쓰고 키에서 손을 뗀다면, debounce는 타이머를 clearTimerout(timer)를 통해 리셋한다.  

이 때, 아직 어떤 것도 스케쥴되지 않았기 때문에 step은 필요하지 않다. 그러고 나서 제공된 함수 - saveInput()이 300ms 뒤에 실행 되도록 스케쥴 된다.  

 

하지만, 만약 방문자가 계속해서 키보드를 두드린다면 debounce가 또 다시 실행될 것이다. 매 실행은 타이머를 리셋하고 (다른 의미로 saveInput() 스케쥴을 취소하고) 새로운 300ms 미래의 스케쥴을 재 설정한다. 따라서 이 과정은 방문자가 300ms 이내로 새로운 키보트를 두드리는한 계속 반복된다. 

 

Debounce implementations in libraries

 

위 예제에서 자바스크립트를 통해 debounce의 실행을 살펴보았다. 

 

하지만, 만약 원하지 않는다면 꼭 프로젝트에서 자신만의 debounce를 사용할 필요는 없다. 

 

광범위하게 사용되는 JS library에 이미 다 담겨있다. 

 

Library	Example
jQuery (via library)	$.debounce(300, saveInput);
Lodash	_.debounce(saveInput, 300);
Underscore	_.debounce(saveInput, 300);