무한 스크롤(Infinite Scroll)은 요즘 사용되는 웹 서비스에서 필수적인 UI 패턴이 되었다. Instagram이나 Twitter 같은 SNS 플랫폼에서 볼 수 있듯이, 사용자가 콘텐츠 하단에 도달하면 자동으로 추가 데이터를 로드하는 방식이다. 무한 스크롤을 구현할 때 예전에는 보통 scroll 이벤트를 활용했지만, 성능과 구현 복잡도 면에서 여러 한계점이 존재했다.
이 글에서는 Intersection Observer API를 활용해 더 효율적이고 재사용 가능한 무한 스크롤 커스텀 훅을 구현하는 방법을 다룬다.
무한 스크롤을 구현할 때 가장 먼저 고려해야 할 것은 '언제' 추가 데이터를 불러올지 결정하는 것이다. 전통적으로는 window의 scroll 이벤트를 활용해 사용자의 스크롤 위치를 감지하고, 특정 지점에 도달했을 때 데이터를 불러오는 방식을 사용했다. 이때 요소의 위치를 계산하기 위해 getBoundingClientRect() 메서드를 함께 사용했는데, 이 방식에는 몇 가지 심각한 한계가 있었다.
우선 scroll 이벤트는 사용자가 스크롤할 때마다 매우 빈번하게 발생한다.
브라우저는 이벤트가 발생할 때마다 등록된 콜백 함수를 실행하고, 여기에 getBoundingClientRect() 같은 계산이 포함되면 레이아웃 계산(reflow)이 강제로 발생한다. 이는 메인 스레드에 부담을 주어 프레임 드랍이나 버벅임의 원인이 된다.
특히 광고, 애니메이션, 알림창 등 여러 라이브러리가 각자의 인터섹션 감지 루틴을 실행하는 복잡한 웹페이지에서는 이 문제가 더욱 심각해질 수 있다.
Intersection Observer API는 이러한 문제를 근본적으로 해결하기 위해 등장했다. 이 API는 특정 요소가 뷰포트나 지정된 상위 요소의 가시 영역에 들어오거나 나가는 것을 감지하는 방식으로 동작한다. 가장 큰 특징은 브라우저가 비동기적으로 교차 상태를 감지한다는 점이다. 개발자가 명시적으로 요소의 위치를 계산할 필요가 없고, 브라우저가 가장 효율적인 시점에 콜백을 실행한다.
