[react] useEffect 안에서 scroll으로 인한 렌더링 문제

[react] useEffect 안에서 scroll으로 인한 렌더링 문제

 

useEffect 내 scroll 이벤트 반복 렌더링을

lodash throttle로 최적화 시키는 법입니다. 

 

프로젝트 진행 중에 스크롤 이벤트를 걸어
스크롤 높이에 따라 조건을 걸어 hidden, block 처리 기능이 필요했습니다. 

하지만 scroll 이벤트 특성상 사용자가 스크롤을 조금만 움직여도 이벤트가 트리거 되기 때문에
아래의 코드를 설정하면 렌더링이 수없이 많이 일어나 위치 80에서
hidden과 block이 연속적으로 일어나면서 렌더링이 반복되는 문제가 생겼습니다. 

 

원래 코드

const onScrollFn = () => {
  if (window.scrollY > 80) {
    setScrollTop(true)
  } else {
    setScrollTop(false)
  }
}

useEffect(() => {
  window.addEventListener('scroll', onScrollFn);
  return () => {
    window.removeEventListener('scroll', onScrollFn);
  };
}, [onScrollFn])

 

해결방법

• 자바스크립트 라이브러리 lodash의 throttle 기능을 활용했습니다.
• throttle 기능은 일정 시간을 설정하고 지정해 둔 시간 내에 같은 이벤트가 반복적으로 일어나지 않도록 막아주는 것입니다. 
• throttle로 정해진 시간에 한개의 이벤트만 발생하도록 처리하고 useMemo로 최적화하였더니 스크롤 이벤트가 눈에 띄게 줄어들었습니다. 

 

최적화한 코드

import { throttle } from 'lodash';

const onScrollFn = useMemo(() => throttle(() => {
  if (window.scrollY > 80) {
    setScrollTop(true)
  } else {
    setScrollTop(false)
  }
}, 1000), [])

useEffect(() => {
  window.addEventListener('scroll', onScrollFn);
  return () => {
    window.removeEventListener('scroll', onScrollFn);
  };
}, [onScrollFn])