디바운싱 검색

디바운싱 

연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식을 디바운싱이라고 말한다. 
주로 마지막 또는 첫 번째로 처리된 함수를 처리하는 방식으로 사용한다. 

 

정리하면 특정 시간 이내, 추가 이벤트가 없는 경우, 첫 번째 ( 또는 마지막 ) 1회만 실행하는 방식이다. 

 

검색창에 글을 입력하면 검색 결과가 바로 나오는 기능을 본 적이 있을 것이다. 

[ 검색하기 ]라는 트리거가 입력이 되면 바로 실행되기 때문에 특별한 작업이 없다면 입력을 할 때마다 API를 호출하기 때문에 비용과 성능적인 측면 모두 좋지 않은 방법이다. 

이런 문제를 해결하기 위해서 디바운싱을 사용한다. 

※ 쓰로틀링 

연이어 발생한 이벤트에 대해서 일정한 delay를 포함시켜, 연속적으로 발생하는 이벤트를 무시하는 방식으로 사용한다. 

즉, 지정한 delay 동안 호출된 함수는 무시한다. 

 

대표적인 예로는 스크롤 기능이 있다. 

 

infinite scroll을 구현한다고 생각했을 때, 스크롤 이벤트를 통해서 다음 정보를 호출한다. 

이때 스크롤을 하는 행위는 1번이지만 브라우저 상에서 스크롤 이벤트는 무수히 많이 발생한다. 

 

이것을 첫 번째 이벤트가 발생한 이후 일정 시간이 지나야지 다음 이벤트를 받아서 해결한다. 

 

정리하면 특정 시간 이내, 추가 입력이 있어도, 처음 1회만 실행한다. 

 

디바운싱 vs 쓰로틀링 

디바운싱 : 특정 시간 이내에 추가 입력이 없어야지 첫 번째 또는 마지막 1회를 실행하는 것이다. 

쓰로틀링 : 특정 시간 이내에 추가 입력이 있어도 무시하고 처음 1회만 실행하는 것이다. 

 

Lodash를 사용해서 디바운싱 구현

Lodash는 자바스크립트의 유틸리티 라이브러리이다. 내장되어 있는 함수가 많기 때문에 자주 사용되는데, 내장된 기능 중에 디바운싱도 존재한다. 

 

Debounce

앞서 말한 것처럼 반복되는 동작을 대기하는 상황에 사용되는데, 예제를 통해 이해해 보자. 

const Function = () => {
  const handleOnChange = (e) => {
    console.log(e.target.value);
  };
  
  return <input onChange={handleOnChange}></input>
}

input에 onChange를 사용해서 console을 확인하면 입력할 때마다 onChange가 실행되는 것을 확인할 수 있다. 

이때 우리가 필요한 것은 중간 과정이 필요 없고 마지막 결과만 필요하다면 Debounce를 사용하면 된다. 

import { debounce } from 'lodash';

const Function = () => {
  const handleOnChange = debounce((e) => {
    console.log(e.target.value);
  },500);
  
  return <input onChange={handleOnChange}></input>
}

Debounce는 setTimeout과 사용 방법이 동일하다. debounce(콜백함수, 시간)

첫 번째 인자로는 실행시키고 싶은 함수가 들어가고, 두 번째 인자로는 시간이 들어간다. 

 

debounce는 두 번째 인자로 넣어준 시간 동안 아무 일도 하지 않았을 때 콜백함수를 실행시킨다. 

 

즉, 무언가 계속 입력하고 있다면 함수를 실행시키지 않고, 우리가 입력을 끝내고 가만히 있으면 그때 함수 결과를 보여준다. 

처음 결과와는 다르게 Debounce를 사용하면 console이 한 번만 찍히는 것을 볼 수 있다.