React 무한 스크롤

주요 개념

Intersection Observer - 요소의 가시성 관찰, Heropy

💡 IntersectionObserver란?

Observer와 Entry의 교차점을 관찰하고 callback을 실행시킬 때 사용하는 API

• 비동기적으로 작동합니다.

관찰자 (Observer)

✅ Options

옵션	기본값	설명
root	브라우저 viewport	화면 교차 영역
rootMargin	"0px 0px 0px 0px"	화면 교차 영역의 마진 값
threshold	0	target Entry의 화면 교차 비율 0이면 Entry가 교차 영역에 닿자마자 callback 실행 1이면 Entry가 교차 영역에 완전히 보여야 callback 실행

관찰 대상 (Entry)

읽기 전용 속성 목록

속성	설명
boundingClientRect	Entry의 사각형 정보
intersectionRect	Entry 교차 영역 정보
intersectionRatio	Entry 교차 영역 백분율 intersectionRect 영역에서 boundingClientRect 영역까지 비율
isIntersecting	Entry와 교차 영역 교차 여부
rootBounds	root 요소의 사각형 정보
target	관찰 대상 요소
time	변경 발생 시간 정보

동작 순서

1. Observer 생성
2. Entry의 ref를 Observer에 등록
3. 교차 옵션이 만족되면 callback 함수 실행