lodash debounce() 정리

debounce()

• 특정 함수가 여러번 반복 실행될 경우, 정해진 지연시간동안 반복된 호출을 마지막에 딱 1번만 호출하도록 제어해준다.

사용법

호출하고자 하는 함수를 첫 번째 인자로 넣고, 지연시간 을 두 번째 인자로 넣는다.

_.debounce(function() {}, 1000(ms))

예제

window resize 이벤트가 발생했을 때, resize 이벤트가 1초 내에 다시 발생하지 않을 경우
콘솔에 로그를 찍는 코드이다.

window.onresize = _.debounce(() => {
    console.log('window resize가 끝났습니다.');
}, 1000);

마치며

사내 프로젝트에서 react-grid-layout 라이브러리를 사용하면서 debounce() 함수를 유용하게 쓸 수 있었다. 복잡한 구조의 컴포넌트를 포함한 item을 resize 할 때, 너무 많은 리렌더링이 일어나면서 성능 면에서 좋지 않은 모습을 보였다.

예를 들어 사용자가 item의 width를 300px 늘린다고 했을 때, 300번의 리렌더링이 일어나게 되는데, 사실상 사용자가 item의 크기가 300번 변하는 것을 인지하기는 힘들다.
또한, 사용자가 item의 크기를 1px 늘리는 데 걸리는 시간은 굉장히 짧다는 점을 이용해
debounce()를 이용해 100~300ms 정도의 짧은 지연시간을 줌으로써, item이 resize될 때 사용자가 인지할 수 있을 정도만 리렌더링 하도록 하며 횟수를 줄이고 성능을 향상 시킬 수 있었다.

debounce()는 반복적인 요청, 호출 등에 대한 성능을 향상시킬 때 사용하기 좋을 것 같다.