ScrollEvent 성능최적화

Throttle이란?

타이머를 선언하여 타이머가 작동중일때는 특정 이벤트가 작동하지 않도록 하는것

즉, 여러번 일어나는 이벤트의 작동횟수를 줄여 성능 최적화를 시키는 것이다.

스크롤이벤트는 마우스 스크롤을 살짝만 내려도 몇십번씩 일어나게 된다.

이런 스크롤 이벤트로 스타일을 변경한다고 하면 리플로우, 리페인팅이 일어나고 프론트의 성능에 영향을 미치는 요인이 된다.

위 코드는 스크롤을 내렸을때 Ref에 접근하여 헤더를 투명하게 만드는 코드이다

스크롤을 맨위에서 아래까지 내렸을떼 197번 이벤트가 발생되고 이를 줄이기 위해 스크롤이벤트에

스로틀링 도입하기로 하였다.

쓰로틀링은 lodash를 사용해서 간단하게 사용할 수 있지만,

디바운딩이나 다른 컴포넌트에서 쓰로틀링을 또 구현할 예정이 없어 라이브러리를 설치하기 보단 해당 컴포넌트에서 직접 구현하기로 하였다.

쓰로틀링은 클로저 개념를 사용해서 직접 구현할 수 있다.

클로저는 함수형 프로그래밍 언어에서 발견되는 특성으로,

즉시 실행함수에서 리턴하는 함수가 외부에서 내부의 변수를 접근할 수 있다.

따라서 외부로부터 내부 데이터를 보존하고, 보호할 수 있다. (캡슐화)

쓰로틀링은 클로저개념을 도입하여 타입스크립트로 구현하면 이와 같다.

또한 리액트에서 useState를 사용하여 클로저 없이 이와 같이 구현 할 수 있다.

쓰로틀링은 다양한 방법으로 구현될 수 있고, 타이머를 실행시킨뒤 실행중일때는 타이머를 새로 실행시키지 않는 것이 포인트이다.

구현은 3가지 방법으로 해보았다.

useMemo는 리턴값을 메모이션함으로 ()없이 handleScroll만으로 실행가능하다.

3가지 코드로 동일한 윈도우 높이에서 동일한 속도로 맨위에서 맨아래로 내렸을때

7~8번의 이벤트가 일어났고 반복해서 실행해봐도, 이들간의 성능차이는 체감 할 수 없었다.

그러나 헤더는 모든 페이지에 존재하고 다른 state에 의해서 리랜더링될 가능성이 많기 때문에

메모이제이션을 하기로 했고, useCallback보다 useMemo를 사용한 코드가 좀 더 클린해 보였기 때문에 useMemo를 사용한 코드를 사용하기로 하였다.