Let's Build a VIRTUALIZED LIST from Scratch in React.js

"현재 널리 사용되는 Twitter와 같은 앱에서는 영구 적으로 웹 페이지 화면에 나타날 수 있는 요소만 렌더링합니다. 이는 사용자가 구역을 스크롤하고 따라 오는 상황을 만들어 성능을 향상시키며 응답 시간을 가속화합니다. ⚡️

• 연결된 요소 수가 많거나 화면 크기가 큰 경우 사용자 경험을 악화시키는 렌더링 오버헷츠를 개선하기 위해 가상화가 도움이 됩니다. 🐌 -> 🚀

• 가상화 목록은 항상 사용자의 시야에만 표시되는 요소만 렌더링합니다. 이는 기존의 모든 아이템을 렌더링하고 여러 개의 요소가 동시에 스크롤해 충돌할 가능성을 방지하여 시각적 화려함을 제공합니다. ✨

• 가상화 목록의 구조는 스크롤을 따라 이벤트 리스너를 통해 현재 사용자가 보고 있는 콘텐츠에서 시작 스트로우 받을 위치(스크롤 오프셋)를 계산하고 사용자 스크롤 시에 해당하는 요소만 렌더링합니다. 💥

• 소요 시간을 최적화하기 위해 가상화 목록의 가상화 목록은 사용자 시야에 들어오는 위치 및 개수만 렌더링하여 전체 콘텐츠를 항상 존재하는 것처럼 유지하고 시각 패턴을 유지하기 위한 틈공간을 활용합니다. 🧩