많은 양의 데이터를 효율적으로 보여주기 위한 기술 Virtual List 구현하기

Virtual List

Virtual Scroll이라고도 불리는 Virtual List 기능은 무엇이며 언제, 어떻게 사용해야 하는지 구현해보고 정리하도록 한다.

일반적으로 Virtual List는 많은 양의 데이터를 보여줘야 할 때 고려되는 기술이라고 볼 수 있다. 실제로 많은 데이터를 사용자에게 노출해야 할 때에는, 페이징 처리를 하여 페이지별 일부 데이터만 노출하거나 데이터의 인덱스 끝에 스크롤이 도달했을 때 일부 데이터를 불러와 기존 리스트에 붙이는 Infinite Scroll 기술이 있다. 후자의 경우 DOM Tree에 렌더링할 DOM이 그대로 적재되므로 정말 많은 데이터의 경우 스크롤할 수록 성능이 저하되고, 메모리를 많이 차지하므로 심한 경우 브라우저가 뻗을 수 있다.

Virtual List는 사용자가 보고있는 영역만 DOM Tree에 적재한다는 점을 봤을 때, 페이징 처리와 유사하나 사용자가 페이지를 이동하는 액션이 없으며, 단지 스크롤을 내리는 행위로 많은 데이터를 볼 수 있다. 페이징 처리와 Infinite Scroll 방법을 섞어놓은 듯한 느낌이 든다.