무한 스크롤 구현해보기

📖 무한스크롤

💬 Intro

• 뭔가 어려워 보이지만 그냥 페이지네이션이랑 별다를 바 없다
• 그냥 UX적인 차이 정도라고 생각함

💬 구현하는 방법

1. onScroll
   • 가장 근본인 스크롤 이벤트를 이용하는 것이며
     scrollHeight, scrollTop, clientHeight 이 세가지 프로퍼티를 사용하여
     구현 가능

if (scrollHeight - scrollTop  >= clientHeight) {
	moreDataFetch()
}

2. IntersectionObserver
   • Web API중 하나로 Target Element를 지정하여 대상이 설정한
     옵션(threshold) 값(예시 0.5)이상 보이면 콜백함수를 실행하게끔한다

const callback = (entries, observer) => {};
const observer = new IntersectionObserver(callback[, options])
observer.observe(targetElement)

💬 고려할 점

• 개수가 많아질수록 reflow로 인해 렌더링 속도가 점점 느려진다 (reflow가 뭐지?)
• 그렇기에 눈에 보고있는 UI외의 아이템은 display: none처리를 해주는 것을 고려해야됨
  1. 이렇게하면 눈에 보이지도 않으면서 렌더링도 되지않아 속도 개선됨
  2. 하지만 DOM tree에는 여전히 존재하기에 문제를 개선한 것이지 해결한 것은 아님
     3. 또한 none처리를 하면 element의 영역이 사라지기때문에 그 밑의 요소가
     올라와서 자리를 차지하기에 reflow와 repaint가 발생한다
• display: none의 문제를 해결할 수 있는 react-virtualized라는 라이브러리가 존재함

💡 답변

데이터 1만개를 가지고 무한 스크롤 구현 시에 가장 중요하게 고려해야할 점은?

당연히 분할해서 불러올건데 reflow 발생으로 개수가 많아질 수록 렌더링 속도가
점점 느려집니다. 그렇기에 눈에 보이는 UI외의 아이템을 어떻게 처리할지
고려를 해야합니다.
단순하게 해결하면 display를 none으로 처리하는 방식이 있습니다.
하지만 이것도 세부적으로 구현하면 문제가 될 것이라 생각합니다.