React Practice | 무한 스크롤 기초

링크1. Heropy | Intersection Observer - 요소의 가시성 관찰

프로젝트 생성

yarn create react-app 프로젝트_경로 --template typescript

yarn add axios throttle-debounce
yarn add -D @types/throttle-debounce

새로 배운 코드

CSS

/* overflow 단축 속성 */
overflow: overflow-x overflow-y

Intersection Observer

Viewport와 Element가 교차하는 지를 추적하는 API입니다.

사용법
new IntersectionObserver(콜백, 옵션)

Entry

크기 / 위치 정보
boundingClientRect : 관찰 대상의 크기 / 위치
rootBounds : 루트의 크기 / 위치
target : 관찰 대상 정보

교차 정보
intersectionRect : 관찰 대상과 루트 교차 영역 크기 / 위치
isIntersecting : 관찰 대상과 루트 교차 여부 true / false
intersectionRatio : 엘리먼트와 루트 교차 영역 비율
time : 교차 여부 (isIntersecting) 가 변경된 시간 정보

사용법

// 크기, 위치 정보
Element.getBoundingClientRect(); // 주의: 호출 시 리플로우 발생

🟣 리플로우?
그려진 Render Tree의 각 요소 크기 / 위치를 다시 계산하는 작업을 말합니다.

• 최초 렌더링
• viewport 크기 변경
• Element Node 추가 / 변경 / 제거
• 폰트 / 이미지 변경

시 Reflow가 발생합니다.

Observer

Intersection Observer의 인스턴스 그 자체

💬 method

observe() // 대상 하나 관찰 시작
unobserve() // 대상 하나 관찰 중지
disconnect() // 모든 대상 관찰 중지

Intersection Observer 생성 옵션