이벤트 리스너를 통해 함수 호출 시 너무 잦은 호출이 발생하여 성능을 저하시킬 수 있다. lodash 의 debounce 를 이용해서 설정한 시간 안에 한번만 호출 되도록 해본다.
debounce ?
이벤트를 그룹화하여 지정한 시간이 지난 후 하나의 이벤트만 발생하도록 처리하는 기술이다.
활용 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { useEffect, useState, useRef } from 'react';
import { debounce } from 'lodash';
const Page = () => {
const [width, setWidth] = useState();
useEffect(() => {
window.addEventListener("resize", measure);
return () => {
window.removeEventListener("resize", measure);
};
}, []);
// debounce 를 통해 1초(1000ms)에 한번만 리렌더링 처리
const measure = debounce(() => {
setWidth(window.innerWidth);
}, 1000);
return (
<div>width: {width}</div>
)
}