성능 향상을 위한 쓰로틀(Throttle)과 디바운스(Debounce)

 

여기서의 쓰로틀과 디바운스는 브라우저 이벤트 성능을 최적화하는 기법으로 설명합니다. 

 

이벤트 성능 최적화 방법

---

디바운스(Debounce)는 중복되는 동작이 반복적으로 일어날 때 강제적으로 무시하고 마지막 동작만 실행하는 것이다. 1초에 100번 동작하는 함수가 있다고 하자. 함수가 실행될 때마다 데이터는 초기화되지만 정밀한 값을 따지지 않는 이상 사람 눈에는 1초에 한두 번 값이 바뀌어 보인다. 이 경우 성능 면에서 효율적이지 못해 최적화를 위해서 디바운스 또는 쓰로틀을 활용하면 되나, 사용자 경험과 최적화 중 어떤 것이 중점인지 파악해서 알맞게 적용해야한다.

 

사용자 경험 => 쓰로틀
성능  => 디바운스

 

이벤트 최적화 사용 예시

---

• 브라우저 resized Event
• Scroll 이벤트
• 키보드 입력 중지

 

lodash 라이브러리를 사용하면 비교적 간단히 쓰로틀과 디바운스를 구현할 수 있다.

 

Lodash Install

---

> npm i lodash

 

디바운스(Debounce)

---

디바운스는 동일한 동작이 반복적으로 실행되면 지연시간 동안 강제적으로 무시하고 가장 마지막에 호출된 동작만 실행한다. 특정 시간이 지났어도 가장 마지막 동작만 딱 한 번 실행하므로 쓰로틀 보다 성능적인 면에서 우위를 가져갈 수 있다.

 

디바운스 예제

---

import { debounce } from 'lodash'

const Layout = () => {

  useEffect(() => {
      window.addEventListener('resize', handleResize);
  //	return () => { // cleanup이 필요한 경우
  //		window.removeEventListener('resize', handleResize);
  //	}
  }, []);

  const handleResize = debounce(() => {  //<-- 디바운스 적용
      console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  }, 500); //<-- 지연시간(milliseconds)

return(
  <>...</>
)

})

export default Layout

 

위는 리액트 환경에서 lodash 라이브러리로 디바운스를 적용한 예제다. 브라우저 윈도우 크기가 변경될 때 지연시간 500ms의 디바운스를 적용했다. 

 

쓰로틀(Throttle)

---

디바운스는 마지막 동작만 실행한다면 쓰로틀은 지정한 시간이 반복되면서 한 번씩만 실행된다. 만약 최적화하고 싶은 이벤트가 중복적으로 지속 실행되는 경우라면 쓰로틀에 적당한 지연시간을 주어 최적화 시키면 좋다.

 

디바운스보다는 실행 횟수가 더 일어나기 때문에 사용자 측면에서는 유동적으로 UI에 변화를 감지할 수 있다.

 

쓰로틀 예제

---

import { throttle } from 'lodash'

useEffect(() => {
	window.addEventListener('resize', handleResize);
//	return () => { // cleanup이 필요한 경우
//		window.removeEventListener('resize', handleResize);
//	}
}, []);

const handleResize = throttle(() => {  //<-- 디바운스 적용
	console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
}, 500); //<-- 지연시간(milliseconds)

 

공식문서

---

Lodash Documentation