Throttling & Debouncing

검색 기능을 구현할 당시, 처음엔 onChange 함수로 state 값을 변화시켜 똑같은 자료를 찾는 방향으로 진행 했었다. 하지만 state 값에 변화가 있을 때 마다 브라우저가 랜더링이 되기 때문에, 랜더링이 너무 많이 발생한다는 단점이 생겼다 (비용적인 문제)

이를 해결하기 위해 수업 땐 디바운싱 을 사용 했다.(쓰로틀링의 예제 코드는 다른페이지 참조)

throttling

• 마지막 함수가 호출 된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

쓰로틀링은 보통 성능 문제 때문에 많이 사용한다. 특성 자체가 실행 횟수에 제한을 거는 것이기도 하다.

스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생한다. scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행되기 때문에 성능적인 문제가 있을 소지가 있다.

이런 경우에 때 쓰로틀링을 걸어줍니다. 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것이다.

var timer;
document.querySelector('#input').addEventListener('input', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      console.log('여기에 ajax 요청', e.target.value);
    }, 200);
  }
});

debouncing

• 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

state값의 변화와 같이 생각하면 이해하기 쉬울 것 같다.

import { useState } from "react";
import _ from "lodash";

export default function example() {
  const [number, setNumber] = useState(0);

  const onClickPlus = (event) => {
    setNumber((prev) => prev + 1);
    getDebounce(event);
  };

  const getDebounce = _.debounce((event) => {
    console.log(number);
  }, 3000);

  return (
    <>
      <div>{number}</div>
      <button onClick={onClickPlus} />
    </>
  );
}

위의 코드는 단순하게 버튼을 누르면 number라는 state 변수가 1씩 올라가는 함수이다.

하지만 getDebounce라는 함수를 끼워넣어 줌으로써 console 창에 state값이 찍히는 타이밍은 내가 클릭을 하고난 3000ms(3초) 뒤이다.(1부터 클릭 횟수만큼 다찍히긴한다. 3초뒤의 number 값을 찍는 코드가아니라 콘솔창에 언제 number값이 찍히는지가 목적이었다.)

검색기능을 구현할 때도 state의 변화를 모두 감지하는게 아니라 search창에 'onChangEvent가 발생하고 몇 초뒤' 라는 debouncing 조건을 걸어줘 일정시간 뒤에 검색기능이 활성화 되도록 함수를 조작한 것이다.

debouncing 을 이용하면 API를 날릴 때의 비용적인 문제를 해결하기에 용이하다. (함수가 항상 실행되는 것이 아니기 때문.)