디바운싱
이란, 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다.마지막 호출이 발생한 후 일정 시간이 지날때까지 추가적 입력이 없을때 실행이 된다.
디바운싱이 사용되는 대표적 예제로는 검색기능
이 있다.
Debounce는 반복적인 동작을 강제적으로 대기하는 것을 말한다.
예를들어, 우리가 input에 onChange를 이용해 console.log()를 확인해 보면 우리가 하나하나 입력할 때마다 onChange가 실행된다.
(아래사진 참조)
Debounce
사용!import { debounce } from 'lodash';
import { debounce } from 'lodash';
export default function Test2() {
const handleOnChange = debounce((e) => {
console.log(e.target.value);
}, 500);
return (
<>
<input onChange={handleOnChange}></input>
</>
);
}
Debounce는 setTimeout과 사용방법이 똑같다. debounce(콜백함수, 시간)
첫 번째 인자로는 실행시키고 싶은 함수가 들어가고, 두 번째 인자로는 시간이 들어간다.
debounce는 우리가 두 번째 인자로 넣어준 시간 동안 아무 일도 하지 않았을 때 콜백함수를 실행시킨다.
즉, 우리가 무언가를 계속 입력하고 있으면 함수를 실행시키지 않고, 우리가 입력을 끝내고 가만히 있으면 그때 함수 결과를 보여준다.
쓰로틀링
이란, 연이어 발생한 이벤트에 대해 일정한 delay
를 포함 시켜, 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용된다. 즉, 지정한 delay
동안 호출된 함수는 무시한다.
쓰로틀링이 사용되는 대표적 예제는 스크롤 기능
이 있다.
(예시)