무한 스크롤
[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll
[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll
2024.05.041) 스크롤 이벤트를 사용한 방법무한 스크롤은 현재 페이지에서 스크롤바가 마지막 콘텐츠 지점에 있을 때 다음 콘텐츠를 자동으로 불러오는 구현 방식을 말한다. ➊스크롤해서 가려진 영역의 높이와 ➋현재 화면(뷰포트)의 높이를 더한 값이 ➌전체 문서의 높이와 같다면 현재 스크롤이 가장 하단 끝에 도달했다는 걸 알 수 있다. 알아야 할 기하 프로퍼티 ❶ 스크롤해서 가려진 콘텐츠 영역의 높이 : document.documentElement.scrollTop ❷ 현재 화면(뷰포트)의 높이window.innerHeight : 스크롤바 포함document.documentElement.clientHeight : 스크롤바 제외 ❸ 전체 문서의 높이// 문서의 정확한 전체 높이를 구하기 위한 코드const scrollHei..