스크롤 이벤트가 있는 웹페이지 최적화에 대한 질문

Question

스크롤을 내림에 따라 디자인이 동적으로 변하는 웹페이지들이 많은 것 같습니다
근데 대부분 컴포넌트는 observe되지 않는다면 성능메모리만 차지하고 필요가 없어보입니다

제 질문은 이런것들이 실제로 사용되나?입니다
1. 만약 어떤 section이 observe되지 않는다면 조건부 렌더링으로 (크기는 동일한)빈 컴포넌트(또는 정적인 컴포넌트)를 랜더링하도록 한다
(단 필요에 따라 상태나 데이터를 임시저장해야할 필요가 있겠네요)

2.따로 조건부 렌더링을 하지않고 observe되지않을때 성능과 메모리를 줄이기 위한 별도 테크닉을 사용한다(무엇이 있을까요?)

3.아무것도 필요없다 
Useeffect안에 스크롤이벤트리스너를 추가하고 scrollY가 특정 주기마다 갱신되는 코드정도만 작성하면 된다

4.기타

물론 케바케긴 하지만 사례가 궁금해요

김하림 · Accepted Answer

요구사항에 따라 다를 것 같긴 한데요, 1번의 경우 아무래도 사용자가 스크롤을 했을 때 조건부 렌더링이 되는 시간이 필요해서 버벅임이 발생할 가능성이 높고, 이는 사용자 경험을 떨어뜨릴 수가 있을 것 같아요.

따라서 저는 2번의 방법이 가장 합리적이라고 생각이 드는데요. IntersectionObserver(https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver)와 같은 Web API를 사용하면 해당 요소가 실제로 뷰포트에서 관측되었을 때 애니메이션을 실행하는 등의 로직을 작성할 수가 있습니다. 렌더링 시점에는 메인 섹션을 제외한 나머지 섹션은 동적인 상태로 존재하다가, 사용자의 관측이 일어날 때 애니메이션을 실행한다 던지의 시나리오를 구성하면 불필요한 성능 낭비를 줄일 수 있을 것 같습니다.

참고로, IntersectionObserver는 직접 커스텀 훅으로 구현할 수도 있고, https://www.npmjs.com/package/react-intersection-observer 같은 라이브러리를 쓰는 방법도 추천드립니다.