리액트 애플리케이션에서 스크롤 이벤트를 처리하다 보면 성능 이슈를 겪을 수 있습니다. 스크롤 이벤트는 사용자가 스크롤할 때마다 매우 빈번하게 발생하므로, 이 이벤트에 직접적으로 무거운 로직을 처리하게 되면 성능 저하가 발생할 수 있습니다.
Throttle이란?
Throttle은 함수가 호출되는 빈도를 제한하는 기법입니다.
이벤트가 발생할 때마다 함수를 실행시키는 대신, 지정한 시간 간격 내에서 한 번만 실행되도록 제한합니다.
이 기법은 스크롤 이벤트처럼 자주 발생하는 이벤트에 특히 유용합니다.
저의 경우 최근 리액트 프로젝트에서 사용자가 스크롤을 할 때 맨 위로 이동했는지 여부를 감지해야 했는데,
사용자가 페이지 상단에 있으면 네이티브 앱으로 메시지를 보내 새로고침 기능을 활성화하고,
그렇지 않으면 비활성화하를 구현 하기위해
throttle을 사용하여 handleScroll 함수가 호출되는 빈도를 제한했습니다 (600밀리초마다 한 번씩 실행되도록 설정).
useEffect(() => {
const handleScroll = throttle(() => {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
if (scrollTop !== 0) {
postMessageToNative<NativeInfo>({
type: 'scrollToTop',
info: false,
});
} else {
postMessageToNative<NativeInfo>({
type: 'scrollToTop',
info: true,
});
}
}, 600); // 600ms마다 한 번씩 실행
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
handleScroll.cancel(); // 스로틀된 함수 취소
};
}, []);
