긴 리스트를 불러오는 무한 스크롤 기능을 구현할 때 흔히 사용하는 방식은 스크롤 이벤트가 발생할 때마다 현재 스크롤 위치와 콘텐츠의 전체 높이를 계산하는 방식이더라고요. 하지만 이 방식은 브라우저가 매번 레이아웃을 다시 계산하게 만드는 레이아웃 스래싱(Layout Thrashing) 현상을 유발하여 성능 저하의 원인이 되기도 하거든요. 이를 해결하기 위해 사용하는 것이 바로 IntersectionObserver API예요. 이 API는 특정 요소가 뷰포트에 들어왔는지 여부를 감지하는 기능을 제공하며, 브라우저 수준에서 최적화되어 동작하기 때문에 매번 스크롤 위치를 계산할 필요 없이 효율적으로 다음 데이터를 불러올 시점을 결정하게 도와준답니다.
// IntersectionObserver 옵션 설정
const observerOptions = {
root: null, // 기본값은 브라우저 뷰포트
rootMargin: '200px', // 요소가 감지되기 전 미리 여유 공간을 확보
threshold: 0.1
};
// IntersectionObserver 인스턴스 생성
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 데이터 로딩 함수 호출
fetchMoreData();
}
});
}, observerOptions);
// 감지할 요소를 지정합니다.
observer.observe(document.querySelector('#sentinel'));IntersectionObserver를 활용할 때 실무에서 유용하게 쓰이는 핵심 설정은 rootMargin과 threshold예요. 특히 무한 스크롤 구현 시에는 rootMargin을 활용해 사용자가 리스트의 끝에 도달하기 직전에 미리 다음 데이터를 요청하는 것이 중요하더라고요. 예를 들어 200px 같은 수치를 설정하면 사용자가 아래로 스크롤할 때 끊김 없이 이어지는 경험을 제공할 수 있어요. 단순히 요소가 정확히 보이는 순간에만 작동하는 게 아니라 감지 영역을 미리 확장함으로써 네트워크 지연으로 인해 빈 화면이 노출되는 상황을 최소화할 수 있는 방식이라서 정말 유용하더라고요.
const target = document.querySelector('#sentinel');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// API 호출 및 데이터 추가 로직을 수행
loadNextPage().then(data => {
renderItems(data);
});
// 한 번 로드 후 감시를 해제하거나 상태를 업데이트하여 중복 요청 방지
observer.unobserve(target);
}
});
}, { rootMargin: '200px' });
observer.observe(target);실제로 구현할 때 이 방식을 사용하면 복잡한 스크롤 계산 로직 대신 선언적인 방식으로 동작을 정의할 수 있어 코드가 훨씬 직관적으로 변하더라고요. 특정 감시 대상 요소가 화면에 노출되는 시점을 기반으로 데이터 페칭을 연결하기 때문에 유지보수가 쉬워지고, 브라우저의 렌더링 성능을 해치지 않으면서도 안정적인 인터랙션을 제공할 수 있어요. 단순히 기능을 구현하는 것을 넘어 사용자 경험과 기기 성능을 동시에 고려해야 하는 실무 환경에서 IntersectionObserver는 무한 스크롤을 구현하는 가장 권장되는 방법 중 하나로 손꼽히기도 한답니다.
'develop > javascript' 카테고리의 다른 글
| TypeScript 5.9 완벽 가이드 2026 (0) | 2026.07.31 |
|---|---|
| fetch 요청 취소 패턴 (AbortController) (0) | 2026.07.24 |
| 이벤트 위임 기반 동적 요소 클릭 처리 패턴 (0) | 2026.07.16 |
| JavaScript 깊은 복사 방법 (structuredClone, JSON.parse 한계) (0) | 2026.07.13 |
| 구글 맵이 간헐적으로 표시 되지 않는 현상 (0) | 2024.08.15 |