Virtual Scroll: 어떤 상황에서 써야할까?

무한 스크롤과 버츄얼 스크롤을 도입 중인 페이지입니다!

 

프로젝트에 도입될 무한 스크롤을 개발 중인 상황입니다.
개발을 진행하던 중 데이터가 무수히 많아질 경우 문제가 발생하진 않을까라는 생각에 무한 스크롤에 대한 최적화를 고민하게 되었습니다!
여러 최적화 중 하나는 버츄얼 스크롤에 대해 파트를 나눠 기록해두려 해요!

 

버츄얼 스크롤 이란?

버츄얼 스크롤(Virtual Scroll)은 대량의 데이터를 효율적으로 처리하기 위한 기술로, 사용자가 실제로 보고 있는 항목만 렌더링하여 성능을 개선합니다.

 

특히, 리스트나 그리드 형식의 데이터를 다룰 때 유용하게 사용됩니다.

이번 블로그에서는 버츄얼 스크롤을 사용해야 할 상황과, 실제 상용 라이브러리에서의 구현 방식을 살펴보겠습니다.

 

상용 라이브러리에 대한 설명은 별도의 글로 분리하였습니다!

 

버츄얼 스크롤을 어느 상황에서 써야 할까?

대량의 데이터 처리

버츄얼 스크롤은 대량의 데이터를 다루는 웹 애플리케이션에서 필수적이라 생각합니다.

예를 들어, 사용자에게 수천 수만 개의 항목이 포함된 리스트를 보여줘야 하는 경우, 모든 항목을 한 번에 렌더링하면 성능 저하가 발생할 수 있습니다.

 

이럴 때, 현재 화면에 보이는 항목만 렌더링함으로써 렌더링 성능을 개선할 수 있습니다.

스크롤 성능 개선

일반적인 스크롤 방식에서는 모든 리스트 항목이 DOM에 존재하게 됩니다.

사용자가 스크롤할 때 화면에 보이는 항목은 바뀌지만, DOM에서 모든 요소가 계속 유지되므로 지워지거나 추가되는 과정이 없습니다.

대신, 브라우저는 스크롤에 따라 보이지 않는 항목들을 여전히 메모리에 두고 있어, 전체 리스트의 크기가 커질수록 렌더링 성능이 저하될 수 있습니다.

 

반면, 가상 스크롤에서는 스크롤할 때 현재 화면에 보이는 항목만 DOM에 렌더링하고, 나머지 항목은 DOM에서 지우거나 숨깁니다.

이렇게 함으로써, 메모리에 유지되는 요소의 수가 줄어들어 성능이 개선됩니다.

사용자가 스크롤할 때 필요한 만큼의 항목만 생성하고, 보이지 않는 항목은 메모리에서 해제하게 되어, 렌더링 과정에서 브라우저가 처리해야 할 요소의 수가 적어지므로 스크롤 성능이 더욱 원활해지겠죠?!

 

결론적으로, 일반 스크롤에서는 DOM의 항목이 지워지지 않지만, 가상 스크롤은 필요 없는 항목을 제거하여 성능을 개선하는 방식입니다.

사용자 경험 향상

페이지 내에서의 원활한 스크롤링 경험을 제공하기 위해서도 버츄얼 스크롤이 필요합니다.

모든 항목을 한 번에 로드하지 않고, 필요한 만큼만 로드하는 방식으로 사용자에게 빠르고 원활한 경험을 제공할 수 있습니다.

 

리렌더링 성능 또한 고려해야 할 부분입니다.

일반적인 스크롤 방식에서는 모든 리스트 항목이 DOM에 존재하므로, 사용자가 스크롤할 때마다 기존 요소가 재렌더링되거나 위치를 변경해야 할 수 있습니다.

이 과정에서 불필요한 리렌더링이 발생하면 성능 저하로 이어질 수 있습니다.

반면, 버츄얼 스크롤에서는 현재 화면에 보이는 항목만 렌더링하기 때문에, 리렌더링이 필요한 항목의 수가 줄어들어 성능이 개선됩니다.

 

데이터가 변경될 때도 화면에 보이는 항목만을 효율적으로 업데이트할 수 있어, 전체적인 사용자 경험이 크게 향상됩니다.

 

결과적으로, 버츄얼 스크롤을 통해 사용자에게 매끄럽고 빠른 스크롤링 경험을 제공함으로써, 대량의 데이터를 다루는 웹 애플리케이션의 성능을 최적화할 수 있습니다. 이러한 경험은 사용자가 데이터를 보다 직관적으로 탐색하고, 필요할 때 빠르게 정보를 얻을 수 있도록 도와줍니다.

 

실제로 버츄얼 스크롤을 상용 라이브러리로 만든 곳에선 어떻게 구현했을까?

상용 라이브러리의 구현 방식

 react-window, react-virtualized, react-virtuoso 관련된 별도의 글로 분리하였습니다!

 

마무리

버츄얼 스크롤은 대량의 데이터를 효율적으로 처리하고, 사용자에게 원활한 스크롤링 경험을 제공할때 매력있는 기술입니다!

다양한 라이브러리들이 각기 다른 방식으로 구현하고 있으며, 프로젝트의 요구사항에 따라 적합한 라이브러리를 선택하는 것이 중요합니다.

 

저는 학습 및 개선점을 찾기위해 스스로 구현중에 있습니다!

 

버츄얼 스크롤이 필요한 이유에 대한 경험

실제로 현재 회사에서 많은 데이터를 다루게 될 경우, DOM의 크기가 커짐에 따라 성능 저하가 발생했었어요.

 

예를 들어, 고객당 보여줄 수 있는 데이터가 10만 개에 달할 경우, 유저의 데이터가 기하급수적으로 증가하면서 성능 최적화가 필요해질 것입니다.

이러한 이유로 버츄얼 스크롤을 도입하게 되었습니다.

당장은 구현된 프로젝트에 문제가 없어보여도 데이터를 효율적으로 처리하고, 사용자 경험을 개선하기 위한 선제적인 조치로 생각합니다.

 

버츄얼 스크롤을 구현하면서 성능을 최적화하기 위해 여러 기법들을 사용했습니다.

예를 들어, 스크롤을 통해 새로운 데이터가 필요할 때, 남은 가상 스크롤 아이템이 있는지 판단하는 로직을 통해 필요한 만큼만 데이터를 로드하도록 설계했습니다.

이 과정에서 데이터의 양과 사용자 인터페이스의 복잡성을 고려하여 최적의 성능을 유지할 수 있도록 지속적인 노력중입니다!

 

 

 

📃 참고 문헌

오늘의집 내 무한 스크롤 개발기

React Window 깃헙

React Virtualized 깃헙

React Virtuoso 깃헙