[React] Intersection Observer 로 무한 스크롤(무한로딩) 구현하기
·
웹개발
Intersection Observer? scroll 이벤트 : - 스크롤 시 짧은 시간 내에 수 백, 수 천의 이벤트가 동기적으로 실행될 수 있어, 성능에 악영향을 줄 수 있습니다. Intersection Observer API : - 루트 요소와 타겟 요소의 교차점을 관찰합니다. - 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공하고 있습니다.- scroll 이벤트와 다르게 교차 시 비동기적으로 실행됩니다. - 성능상 유리합니다. 교차점 정보는 다음과 같은 여러 가지 이유로 필요합니다.페이지가 스크롤될 때 이미지나 다른 콘텐츠가 레이지 로딩되는 현상.사용자가 페이지를 넘길 필요가 없도록 스크롤할 때 점점 더 많은 콘텐츠가 로드되고 렌더링되는 "무한 스크롤" 웹사이트를 구현합니다.광..