이벤트핸들러를 효율적으로 처리해야 하는 이유

이벤트가 발생할때마다 반복문을 실행하는 함수나 API 로직이 호출되는 경우 비용적인 문제가 발생할 뿐 아니라 최적화에도 좋지 않다. 이런 경우 사용하는 Debounce에 대해 알아보자.

Debounce

Debounce는 특정 이벤트가 발생할때마다 비지니스 로직이 과도하게 호출되는 것을 방지하기 위해 delay를 걸어주는 방식으로 이해하면 쉽다. 즉, 연이어 호출되는 함수를 일정 시간이 지난 후 마지막 로직만 실행하도록 작성할 수 있다.

사용방법

1. 설치

$ npm install lodash

아래는 내 코드 예시이다.

import import { debounce } from "lodash";

  const inputStrValue = debounce((str) => {
    setInputTxt(str);

    if (str.length) {
      const inputText = inputStr(str);
      if (inputText.length) {
        setData(inputText);
      } else {
        setData([]);
      }
    } else {
      setData(allData);
    }
  }, 500);

설치한 lodash라이브러리를 import해준 뒤 최적화시킬 함수 전체를 감싸주면 된다. 나의 경우는 500을 입력하여 0.5 초뒤 최종 입력된 input값에만 함수를 호출하도록 작성하였다. 만일, debounce를 사용하지 않는다면 input창에 값이 입력될때마다 inputStrValue함수가 호출될 것이다. debounce를 사용해줌으로써, 0.5초 후에 마지막 이벤트에 대해서만 함수가 호출되도록 코드를 효율적으로 작성할 수 있었다.