lodash에서 사용하는 debouce()에 대하여 알아봅니다. 입력폼에서 많이 사용되는 debounce를 사용하려면 어떻게 할까요?

# debounce() 메소드 알아보기

debounce() 메소드는 이벤트에 의해 특정 함수가 여러번 반복 실행될 수 경우에 사용하며 정해진 지연시간동안 반복된 호출을 딱 1번만 호출하도록 제어해줍니다. 먼저 lodash에서 debounce() 문법은 아래처럼 사용합니다.

_.debounce(콜백함수, 시간)

실행될 콜백함수와 얼마동안의 호출을 debounce()에서 처리할 것인지 인자로 추가하게됩니다. 그럼 아래에서 몇 가지 예제를 사용하여 알아봅니다. 다른 언어나 라이브러리 등에도 debounce 기능을 가지는데 이를 사용해보지 않은 경우 이해하기 어려울 수 있습니다.

예제로 이해하는 것이 더 빠를 것 입니다. 아래의 예제 코드를 참고해주세요.

! 참고로 react인 경우 아래 링크를 참고하시기 바랍니다.

react debounce 적용 링크 바로가기 >
https://webisfree.com/2020-11-26/react-검색창에-debounce-적용하는-방법

! debounce() 예제보기

아래 예제들은 실제로 웹페이지에 많이 사용되는 예제들입니다. 그럼 아래 내용을 하나씩 봐주세요.

@ 직접 함수를 호출하는 경우
아래에서는 2초 동안 한 번 실행하는 것과 2초 동안 3번의 함수를 실행하는 것의 결과를 보여주게 됩니다. 원래는 3번 호출하므로 3번 함수가 실행되어야 하지만 debounce()를 사용하여 똑같이 1번만 실행될 것입니다.

var showConsole = function() {
console.log(1);
};

_action = _.debounce(showConsole, 2000);

이제 2초 동안 함수를 1번만 실행합니다.

_action();

1 // 1번만 호출됨

이번에는 2초 동안 세번 연속해서 함수를 실행합니다.

_action();
_action();
_action();

1 // 3번 호출해도 1번만 호출됨

이처럼 2초 안에 반복 실행된 여러번의 함수는 2초가 지난 후 1번 만 동작하게됩니다. 예상된 결과였죠.

! 엘리먼트에서 이동하는 이벤트 처리에 사용, debounce()

이번 예제는 이벤트 실행에 따른 퍼포먼스, 성능과 관련된 예제입니다. 특정 요소에서 이동하는 이벤트의 경우 짧은 시간 많이 동작하게 되는데 이 경우 퍼포먼스에 영향을 주게되므로 이를 제어하면 성능을 개선할 수 있습니다. 만약 이동이 멈추었을때 한 번만 동작해도된다면 불필요하게 많은 이벤트 콜백은 삭제해야하므로 이를 위해서 debounce()를 적용해봅니다.

먼저 엘리먼트를 만들고 이동하면 함수를 호출하도록 이벤트를 추가합니다.

아래는 스크립트 코드입니다.

showNum = function() {
console.log(2);
};

var _ele = document.querySelector('#test');
_ele.addEventListener('mousemove', _.debounce(showNum, 100));

이제 위의 코드를 적용하면 debouce가 적용되어 함수가 호출되는 것을 확인할 수 있습니다.

# 검색 입력폼에 적용하기, debounce()

이번 예제는 debounce()가 가장 자주 사용되는 예제 중 하나이기도 합니다. 검색어를 입력할때 일정시간 동안 반복 입력된 경우 호출하지 않고 한 번만 호출하도록 도와줍니다. 이번 예제 역시 성능을 크게 개선하는데 이 전 예제가 클라이언트 측 성능 개선이라면 이 예제는 api 호출하는 경우 이를 크게 줄여주므로 서버측에도 성능향상이 높다 하겠습니다.

아래는 사용된 스크립트 코드입니다.

test = function(event) {
const keyword = event.target.value;

// 입력된 키워드를 출력함
console.log(keyword);
};

showResult = _.debounce(test, 500);

위 코드를 적용하면 input 박스에 반복하여 키워드를 입력하여도 .5s에 입력된 키 이벤트는 한 번만 호출하게 됩니다.

여기까지 debounce의 여러 기능에 대하여 알아보았습니다.