jus0k / scroll-hooks

React Hooks로 스크롤 애니메이션 구현하기

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

"Intersection Observer" 사용 제안

doong-jo opened this issue · comments

@jus0k 님 안녕하세요 :)

window.addEventListener 를 통해 직접 스크롤 이벤트를 핸들링하는 것은 아래와 같은 현상들이 발생합니다.

  • scroll 이 될 때마다 이벤트 발생 (단시간에 수십~수백번 호출 / debounce로 개선 가능)
  • getBoundingClientRect 호출 시에 리플로우(레이아웃 전체 리렌더링) 현상 발생 => 성능 저하

2016년 이후, 최근에 들어서는 이에 대한 대안으로 Intersection Observer를 사용하고 있습니다.

혹시 고려해보셨을까요?

안녕하세요 성동님! 안그래도 요 부분 성능 이슈가 있는 것을 알고 있었는데요~ 말씀해주신 부분 찾아서 적용해보겠습니다 ㅎㅎ 모르는 부분 있으면 물어볼게요 :)