무한 스크롤 고려할 점

무한 스크롤이란?

사용자가 스크롤을 내릴 때 계속해서 콘텐츠가 로드되는 기능이다.
'무한'이란 이름이 붙여진 만큼 끝없이 콘텐츠가 보여준다.

무한스크롤 구현 예시:

https://velog.io/@jntantmsemt/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-react

Q 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?

A

데이터를 분할하여 불러올 때마다 reflow 발생으로 reflow 발생으로 개수가 많아질수록
렌더링 속도가 점점 느려집니다. 그렇기에 눈에 보이는 UI외의 아이템을 어떻게 처리할지
고려를 해야합니다 리플로우를 방지하는 Intersection Observer 등을 이용할 수 있습니다.

리플로우(reflow): 리플로우는 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스의 이름으로, 
문서의 일부 또는 전체를 다시 렌더링하는 데 사용됩니다.

참고:https://velog.io/@khy226/intersection-observer%EB%9E%80-feat-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0