1) Debounce
debounce는 연속으로 이벤트 호출이 일어나는 상황에 사용하는 함수로,
마지막 이벤트가 실행되고 일정 시간 동안 추가 이벤트가 발생하지 않을 때 실행됩니다.
debounce는 꼭 필요한 시점에만 함수를 실행해 서버 자원을 효율적으로 사용할 수 있게 해줍니다.
*설치 방법
npm install --save lodash
예시 코드를 통해 debounce 함수를 알아보겠습니다.
import React, { Component } from 'react';
import { debounce } from 'lodash';
class reactDebounce extends Component {
debounceFunc = debounce( () => {
console.log("Debounce API Call");
}, 1000);
render() {
return (
<>
<h2> 검색어 입력 </h2>
<input type="text" onChange={this.debounceFunc} />
</>
)
}
}
export default reactDebounce;
react에서는 lodash 패키지를 import 하여 debounce 함수를 사용합니다.
<input> 태그의 onChange 속성을 이용해 텍스트를 입력할 때마다 debounceFunc 함수를 호출합니다.
debounce 함수에 1초(1000ms)의 지연 시간을 할당합니다. debounceFunc 함수는 글자가 입력될 때마다 호출되지만, debounce 함수는 마지막 호출이 끝나고 1초 후에 콘솔 로그를 출력합니다.
검색어 자동 완성 기능도 debounce를 이용해 구현할 수 있습니다.
실제로 사용자가 입력한 텍스트가 포함된 검색어를 불러와야 할 때는 "Debounce API Call" 텍스트 대신 검색어 데이터를 호출하는 코드가 위치해야 합니다.
이때 디바운스를 사용하지 않고 react 라는 글자를 입력한다면 r, re, rea, reac, react가 입력되는 시점에 모두 데이터를 호출해야 합니다. 하지만 디바운스를 사용한다면 react라는 글자가 모두 작성되고 지연 시간 1초가 지난 후 데이터를 한 번만 호출하면 됩니다.
2) throttle
throttle도 debounce와 동일하게 시간 조건을 추가하여 실행 횟수를 제한합니다.
*debounce와의 차이점
debounce는 연속된 이벤트 중 마지막 이벤트가 발생한 시점부터 특정 시간이 지났을 때 동작한다면,
throttle은 발생한 이벤트 수와 관계없이 지정한 시간 단위당 최대 한 번만 동작합니다.
즉, 1초의 실행 시간 간격을 할당한다면, throttle 함수는 1초마다 0개 또는 1개의 로그를 출력합니다.
만약 react 라는 검색어를 0초(r), 0.3초(e), 0.5초(a), 1.1초(c), 2초(t)에 입력했다면,
throttle은 0초(r), 1초(rea), 2초(react)에 1초 단위로 데이터 호출 코드를 실행하는 것입니다.