Debouncing / Throttling

debouncing

디바운싱이란, 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다.

특정 작업을 할 때 특정 시간 내에 다시 작업이 반복되지 않으면 마지막에 한번 실행하는 것

• 특정시간(0.2초)이 지날 때까지 재반복이 일어나지 않는 경우 1번 실행
  ex) 검색 기능

throttling

반면 쓰로틀링이란, 연이어 발생한 이벤트에 대해 일정한 delay를 포함 시켜, 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용됩니다.

먼저 1번 실행 - 특정시간(0.2초)동안 무시
ex) 무한 스크롤

---

Lodash 디바운싱 구현

먼저 lodash를 사용하기 위해서는 설치해야한다

yarn add lodash
yarn add -D @types/lodash

---

Debounce는 반복적인 동작을 강제적으로 대기하는 것을 말한다.

_예를 들어 , 우리가 input에 onChange를 이용해 console.log()를 확인해 보면 우리가 하나하나 입력할 때마다 onChange가 실행된다.

export default function Test2() {

	const handleOnChange = debounce((e) => {
		console.log(e.target.value);
  });
  
	return (
		<>
			<input onChange={handleOnChange}></input>
		</>
	);
}

그럴 경우 중간 과정을 없애고 결과만 한 번에 실행해주는 것이 Debounce이다.

import { debounce } from 'lodash';

그리고 우리가 원하는 기능을 debounce로 감싸주면 된다

import { debounce } from 'lodash';
export default function Test2() {
  
	const **handleOnChange** = **debounce((e)** => {
		**console.log(e.target.value);**
	}, **500**);

	return (
		<>
			<input onChange={handleOnChange}></input>
		</>
	);
}

위에서 * 표시된 부분이 Debounce 이다.

Debounce는 setTimeout과 사용방법이 똑같다. debounce(콜백함수, 시간)

첫 번째 인자로는 실행시키고 싶은 함수가 들어가고, 두 번째 인자로는 시간이 들어간다.

debounce는 우리가 두 번째 인자로 넣어준 시간 동안 아무 일도 하지 않았을 때 콜백함수를 실행시킨다.

즉, 우리가 무언가를 계속 입력하고 있으면 함수를 실행시키지 않고, 우리가 입력을 끝내고 가만히 있으면 그때 함수 결과를 보여준다.

결과는 !!!!!

이거를 어디에 활용할 수 있을까 ?????

Debounce 활용하는 곳

주로 검색을 할 때 사용 우리가 검색을 할 때 엔터를 치지 않더라도, 사용자가 입력을 멈추고 일정 시간이 지나면 자동으로 함수를 실행시켜 검색 결과를 보여주는 것

시크릿 코드