이 게시물은 원본 아티클인 JavaScript Debounce, Easiest explanation !(with Code) 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 jeetvora331 에게 있습니다.

디바운싱(Debouncing)은 웹 어플리케이션에서 함수의 호출 빈도를 제한해 성능을 개선시키도록 도와주는 프로그래밍 기술입니다. 이번 게시물에서는 디바운싱이 뭔지, 왜 유용한지, 그리고 JavaScript에서 어떻게 구현하는지 코드 예제와 함께 알아보도록 하겠습니다.

디바운싱이 뭔가요?

디바운싱은 마지막 호출로부터 일정량의 시간이 경과할 때 까지 실행을 딜레이시키는 방법 입니다. 이는 비용이 높거나 시간이 많이 소요되는 불필요하거나 반복적인 함수 호출을 피하고자 하는 상황에서 유용하게 사용됩니다.

예를들어, 검색창에 사용자가 입력할 때 검색어 추천을 보여준다고 상상해봅시다. 만약 모든 키 입력에 추천 검색어를 가져오는 함수를 호출한다면, 서버로 너무 많은 요청을 보내게 될 수 있으며, 이는 어플리케이션의 속도를 늦추고 자원을 낭비할 수 있습니다. 대신에 디바운싱을 사용해 사용자가 타이핑을 멈출 때 까지 기다려 요청을 생성하지 않을 수 있습니다.

JavaScript에서 디바운싱을 어떻게 구현하나요?

JavaScript에서는 여러 다른 방법으로 구현할 수 있지만, 일반적인 접근 방법은 기존 함수를 지연 실행하는 새로운 함수를 반환하는 래퍼 함수를 사용할 수 있습니다. 또한 래퍼 함수는 타이머 변수를 추적해 새로운 함수가 호출 될 때마다 딜레이를 지우거나 재설정하는데 사용합니다.

Copycopy code to clipboard
const debounce = (mainFunction, delay) => {
	let timer;

	return function (...args) {
		clearTimeout(timer);

		timer = setTimeout(() => {
			mainFunction(...args);
		}, delay);
	};
};

디바운스 래핑 함수 사용

Copycopy code to clipboard
function searchData() {
	console.log('searchData 실행됨');
}

const debouncedSearchData = debounce(searchData, 3000);

debouncedSearchData();

이제 언제든지 debouncedSearchData를 호출하면, 그 즉시 searchData가 실행되지 않고 3초를 기다립니다. 만약 debouncedSearchData가 3초 안에 다시 호출되면, 타이머가 리셋되고 다시 한번 3초를 기다립니다. 반드시 3초동안 debouncedSearchData의 새로운 요청이 없어야지만 searchData가 실행됩니다.

시각적인 예시

해당 이미지가 함수가 다시 호출되었을 때 setTimeout()이 오버라이팅 되는 모습을 명확하게 보여주고 있습니다.

현실에서의 간단한 3가지 디바운싱 예제

1. 제출(Submit) 버튼: 만약 웹사이트에서 제출 버튼을 클릭하면, 이는 즉시 데이터를 전송하지 않고 다시한번 클릭하는지 몇 밀리초정도 기다립니다.
   이 방법은 우연히 두번 제출되고 오류가 나는 것을 방지합니다.
2. 엘레베이터: 엘레베이터 호출 버튼을 눌렀을 때, 이는 즉시 움직이지 않고 또 다른 사람이 타거나 내리려는지 몇 초 동안 기다립니다.
   이 방법은 자주 올라가고 내려가거나 하지 않고 에너지와 시간을 절약하도록 합니다.
3. 검색창: 검색창에 뭔가 입력할 때, 이는 모든 입력에 검색어 추천을 하지 않고 타이핑이 끝날 때 까지 기다립니다.
   이는 서버에 너무 많은 요청을 하는것을 피하고, 성능과 사용자 경험을 개선시킵니다.

결론

디바운싱은 성능이나 사용자 경험에 영향을 주는 불필요하거나 반복되는 함수를 줄여, 웹 어플리케이션을 최적화 하는데 유용한 기술입니다. JavaScript에서 디바운싱을 구현하기 위해 기존 함수의 실행을 지연시키는 새로운 함수를 반환하는 래퍼 함수를 사용해 디바운싱을 구현 할 수 있습니다. 이렇게 하면 마지막 호출 이후 일정 시간이 경과할 때 까지 기존 함수의 실행이 지연됩니다.

이 블로그 내용이 JavaScript에서 디바운싱에 대해 배우는 데 도움이 되었으면 좋겠습니다. JavaScript 에서 쓰로틀링(Throttling) 게시글 도 볼 수 있습니다.