웹페이지를 구성하는데 해당 사이트는 다시 방문한 사용자가 읽었던 포스트의 위치를 기억하고 그 페이지를 보여준다고 생각해보자.
페이지를 나눌 단위가 없으므로 사용자의 스크롤링 마다 이벤트를 발생시키면 서버와 클라이언트에게 과부하(오버클릭)가 생길 가능성이 있다. 이런 경우를 처리하기 위해 디바운싱과 쓰로틀링 개념을 적용할 수 있다
디바운싱 (Debouncing)
연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다.
먼저 발생한 이벤트가 처리를 대기하며, 대기하는 도중 새 이벤트가 발생하면 이전 이벤트 대기를 취소하고, 해당 이벤트를 기준으로 다시 처리를 대기한다.
마지막 호출이 발생한 후 일정 시간이 지날때까지 추가적 입력이 없을 때 실행한다.
대표적인 예제는 검색기능 이 있다.
Lodash를 통한 디바운싱 구현하기
Lodash는 자바스크립트 라이브러리이다. 내장되어 있는 유용한 함수가 많아서 자주 사용 된다. 그 중에 디바운싱을 구현해보자.
설치
yarn add lodash
yarn add -D @types/lodash
Debounce 는 반복적인 동작을 강제적으로 대기하는 것을 말한다.
예를들면 input에 onChange를 이용해서 console.log()를 찍어보면 하날하나 입력할때 onChage가 시랭된다.
이 경우 중간 과정을 없애고 결과만 한 번에 실행해주는 것이 Debounce 이다.
사용방법은 아래와 같다.
// 사용하고자 하는 컴포넌트에서 import 한다.
import { debounce } from 'lodash';
export default function Test2() {
// 그리고 원하는 기능을 debounce 로 감싸주면 된다.
const handleOnChange = debounce((e) => {
console.log(e.target.value);
}, 500);
return (
<>
<input onChange={handleOnChange}></input>
</>
);
}
Debounce는 setTimeout과 사용방법이 똑같다. debounce(콜백함수, 시간)
첫 번째 인자로는 실행시키고 싶은 함수가 들어가고, 두 번째 인자로는 시간이 들어갑니다.
두 번째 인자로 넣어준 시간 동안 아무 일도 하지 않았을 때 콜백함수를 실행시킨다. 즉 무언가를 계속 입력하고 있으면 함수를 실행시키지 않고, 입력을 끝내고 가만히 있으면 함수 결과를 보여준다.
아래 결과를 보면 아까와는 다르게 console.log()에 한번만 찍힌 것을 확인할 수 있다.
쓰로틀링 (Throttling)
반면 쓰로틀링은 연이어 발생한 이벤트에 대해 일정한 지연을 포함시켜 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용된다. 즉 지정한 delay 동안 호출된 함수는 무시된다.
대표적 예제로는 스크롤 기능이 있다.
++ 예제추가하기!!!
