[React] React.js 의 debounce 함수

이벤트 발생과 그에 따른 이벤트 핸들러 콜백 함수를 다루는 것은 프로그램 코드를 작성하는데 가장 중요한 개념입니다. 클릭이벤트처럼 단순하지 않으며 키보드의 입력이 지속적으로 발생할 경우 여러 번의 이벤트를 통하여 API를 호출하게 되면 서버에 과부하가 발생하게 됩니다.

 

debounce란?

debounce란 특정 이벤트가 발생할 때에 작동하는 비즈니스 로직이 과도하게 발생하는 것을 방지하기 위하여 사용되는 함수입니다. onchange() 함수를 통하여 이벤트가 발생할 때마다 서버에 API를 호출하기보다는 일정 시간이 지난 후에 서버 API를 호출하게 되는 지연 호출의 역할을 하는 함수를 말합니다. 함수의 설정마다 다르겠지만 호출되는 함수들 중 마지막 또는 제일 처음만 호출하도록 하는 함수입니다.비슷한 함수로는 throttle() 함수가 있습니다.

 

<input class="textInput" />

document.querySelector('.textInput').addEventListener('input', function(e) {
  console.log('이벤트 발생중', e.target.value);
});

//debounce 함수 역활 하는 코드
let timer;
document.querySelector('.textInput').addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('마지막 이벤트 발생중', e.target.value);
  }, 200);
});

 

React에서는 lodash 라이브러리인 debounce 함수를 사용할 수 있습니다.

<input type="text" onChange={debounceFunction} />


import React from "react";
import { debounce } from "lodash";

const debounceFunction = debounce(() => {
  console.log("debounce 함수 호출중!");
}, 200);