Javascript - debounce의 개념과 예제 코드

이번에는 디바운스(debounce) 혹은 디바운싱(debouncing)이라고 불리는 개념을 알아보도록 하겠습니다. 이 글에서는 debounce라는 단어를 사용하여 개념을 설명합니다.

Debounce의 개념

debounce는 한 문장으로 요약정리하면 처리해야 하는 일들을 미루어두었다가 한 번에 실행하는 방법을 말합니다. 의미 그대로 하나의 방법이기 때문에 표현하는 방법이나 설명하는 방식은 여러 형태로 존재하지만, 단순히 이벤트 핸들러 혹은 이벤트 처리하는 기술에 국한되는 것이 아니라 포괄적인 개념으로 실행해야 하는 일련의 일들을 한 번에 처리한다고 이해하시면 좋을 것 같습니다.

일반적인 일 처리 시점과 Debounce 일 처리 시점

 위 그림은 일반적인 일을 수행하는 시점과 debounce를 적용한 일을 수행하는 시점을 시각화한 내용입니다. 처리해야 할 일이 생기면 바로 처리하는 일반적인 방식과 다르게 debounce는 즉시 처리하지 않고 맨 마지막 시점에 일을 처리합니다. debounce는 왜 나중에 일을 처리하는 걸까요? 결론은 간단합니다. 동일한 작업 처리 요청이 n번 발생했을 때 일을 단 한 번만 수행하겠다는 의미입니다.

 

 일반적으로 처리해야 하는 일이 n번의 요청이 있었다면 n번의 수행을 하는 것이 맞지만, 만약에 n번의 요청은 있지만 최종(혹은 처음) 요청의 처리결과만 필요로 한다면 어떻게 해야 할까요? 100번의 일을 하고 100번의 결과를 받기보다 조금 더 효율적으로 일을 하기 위해 100번의 일들 중 마지막으로 요청받은 일만 수행하고 결과를 받기를 원한다면 어떻게 해야 할까요? 예를 든다면 구글이나 네이버와 같은 검색어 입력란에 검색어를 입력하면 자동으로 완성되는 검색어 기능처럼 말이죠

 

 바로 그런 경우에 사용되는 방법이 수행해야 하는 일들을 미루어서 단 한 번만 처리하는 debounce 입니다. 단 주의할 점은 수행해야 하는 일이 같은 경우에 사용하는 것이 좋습니다. 처리하는 일이 같지 않은 경우 debounce를 이용해 단 한 번만 일을 수행한다면 예상하지 못한 상황이 발생하기 때문입니다.

Debounce 예제 코드 만들기

그럼 이번에는 자바스크립트를 이용해서 debounce 예제 코드를 통해 구현해보도록 하겠습니다.

function debounce(func, delay = 0) {
    let timer = null;
    
    return function() {
        const context = this;
        const args = arguments;
        
        if (timer) {
            clearTimeout(timer);
        }
        
        timer = setTimeout(() => func.apply(context, arguments), delay);
    };
}

 자바스크립트의 클로저와 내장 함수인 setTimeout()를 활용해 debounce를 만들어 보았습니다. 클로저를 이용해 timer는 debounce 내부에서 접근이 가능하게 만든 뒤 debounce를 통해 실행되는 함수가 delay보다 짧은 주기로 호출되면, setTimeout()를 통해 실행 시점을 초기화시키는 구조입니다.

 

 위에서 제시한 debounce 예제 코드는 실무에서 사용하기에는 부족한 부분이 많지만 학습에 활용하기에는 문제가 없으니 직접 코드를 작성해서 debounce를 사용해보시면 좋습니다.

끝맺음

debounce를 잘 활용하면 검색어 자동 완성 같은 기능뿐만 아니라 처리하는 일의 횟수를 줄여서 자원의 사용을 극대화할 수 있습니다. 다르게 말하면 서버에서 처리해야 하는 일의 총량 부하를 줄여줍니다. 그래서 대량의 트래픽을 관리할 때 주요하게 쓰이는 방법이기도 합니다.

 

 그리고 debounce를 직접 만들어 보는 것은 학습적으로 매우 좋은 방법이지만, 실무에서는 lodash나 underscore 같은 라이브러리에 만들어져 있는 debounce를 활용하는 것도 좋은 방법 중 하나입니다.