라떼군 이야기
lodash로 간단하게 debounce 사용하기
Problem
debounce
를 이용 하고자 하면 아래처럼 타이머 핸들을 이용해서 사용하는 것을 생각할 수 있을 것이다.
clearTimeout
을 이용하기 때문에 같은 함수가 빠르게 호출되어도 실제로는 타임아웃 간격을 넘어선 호출만 유효하게 동작한다.
참고로 debounce
는 반복적인 특정 동작을 반복되는 과정에서 강제적으로 대기하는 것을 말한다.
아주 빠르게 같은 동작을 처리하는 함수가 있을 때, 빠르게 호출되는 중간 과정을 보여주지 않고 결과를 모아 보여줘도 문제가 되지 않을 경우 많이 사용한다. 그 결과로 성능 향상을 기대할 수 있다.
예를 들어 입력 박스에 아주 빠르게 타이핑 하는데 매 입력 시 마다 처리해야 할 무언가가 있을 경우 빠르게 타이핑되는 중간 과정을 생략하고 멈췄을 때 결과를 debounce
를 이용해 보여줄 수 있다.
const onChange = () => {
clearTimeout(timerHandle);
timerHandle = setTimeout(function() {
...
}, 500);
}
Solution
lodash
1를 이용하면 아래 처럼 보다 간단하게 작성할 수 있다.
lodash
는 순수 자바스크립트로 작성된 유틸리티를 제공하는 라이브러리인데 빠르고 직관적이면서 사용도 간편해서 많이 사용되고 있다.
참고로 lodash
내부의 debounce
도 setTimeout
과 clearTimeout
을 이용해서 구현2되고 있으므로 동작 방식이 위 코드와 크게 다르지 않았다.
import { debounce } from 'lodash';
...
const onChange = () => {
console.log("This is a onChange");
debounceOnChange();
};
const debounceOnChange = debounce(() => {
console.log("This is a debounce function");
}, 500);