Dorong Dorong 💻😴

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

버츄얼 스크롤 이란?

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

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

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

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

해당 글에선 버추얼 스크롤을 직접 구현하기 전에 도입을 위해 찾아본 이미 상용화된 라이브러리에 대해 작성해 보겠습니다!

인기 라이브러리 개요

검토해본 버츄얼 스크롤을 지원하는 라이브러리로는 react-window, react-virtualized, react-virtuoso가 있습니다.

각 라이브러리는 고유한 접근 방식을 통해 버츄얼 스크롤을 구현하고 있으며, 다양한 사용 사례와 성능 요구사항에 맞추어 설계되었습니다.

이 중에서 React Virtualized는 가벼워진 버전인 React Window가 가장 많이 사용되며, React Virtuoso는 비교적 최근에 출시되어 사용량이 적지만 점점 인기를 끌고 있는 라이브러리입니다. React Virtuoso는 React Window에는 없는 기능들을 지원하여 가볍고 간단하면서도 다양한 요구에 대응할 수 있습니다. 이들 라이브러리는 가상 스크롤을 통해 스크롤을 내릴 때 데이터를 끊김 없이 보여줄 수 있는 windowing 처리를 지원합니다.

Windowing

Windowing은 현재 화면에 필요한 데이터만 표시하는 방법입니다. 긴 리스트의 경우 모든 데이터를 한 번에 렌더링하면 성능이 저하되고 렉이 발생할 수 있기 때문에, windowing 기술을 통해 효율적으로 데이터를 처리할 수 있습니다.

엘리님의 드림 코딩 Express 강의의 Rate Limit 관련 알고리즘을 학습하며 알게 됐던 개념인데 다시 보니 괜히 반갑네요! ㅎㅎ

스크롤 위치

• React Virtualized는 사용자가 스크롤한 위치를 기억하는 기능이 있어 페이지를 새로고침해도 그 위치에서 다시 시작할 수 있습니다.
• React Window는 스크롤 위치 저장 기능이 없어, 새로고침 후 최상단 항목으로 돌아가는 불편함이 있을 수 있습니다. 예를 들어, 1000개의 리스트 항목 중 700번째 항목을 보고 있다가 새로고침하면 최상단으로 이동합니다.
• 클라이언트 사이드 라우팅으로 인해 페이지 간 이동 시 상태가 유지되지만, URL이 변경되면 스크롤 위치가 초기화되어 페이지가 언마운트되고 새로운 컴포넌트가 마운트되기 때문에 초기 상태로 돌아갑니다.
• 언마운트 시 API 요청이 다시 발생할 수 있으며, Context API, Redux, React Query 등의 상태 관리 방법을 사용하여 불필요한 API 요청을 방지할 수 있습니다.

높이 계산 (정적, 동적)

• React Window는 정적인 높이를 지원하므로 리스트 항목의 높이가 일정해야 사용 가능합니다.
• React Virtualized는 동적인 높이를 지원하여 리스트 항목의 내용에 따라 높이가 달라져도 자동으로 계산할 수 있습니다. 이를 위해 CellMeasurer 컴포넌트를 사용할 수 있으며, 이 컴포넌트는 새로운 콘텐츠가 나타날 때 높이를 자동으로 재계산합니다.
• CellMeasurer와 함께 CellMeasurerCache를 사용하면 높이를 캐시하여 성능을 향상시킬 수 있습니다.

React Window

• 목적: 많은 데이터 리스트와 표 형식 데이터를 효율적으로 렌더링하여 뷰포트에 보이는 항목만 렌더링합니다.
• 주요 기능:
  • React Window는 기본적으로 정적인 높이를 가진 리스트와 그리드만 제공합니다. 필요한 최소한의 기능을 제공하여 경량화된 라이브러리입니다.
  • DOM 노드 수를 최소화하여 렌더링 시간과 메모리 사용량을 줄입니다.
  • 초보자를 위해 설계된 간단한 API로 성능에 중점을 둡니다.
  • react-window-infinite-loader와 같은 외부 패키지를 사용하여 데이터의 지연 로딩을 지원합니다.
• 사용법: 최소한의 설정으로 쉽게 사용할 수 있으며, 사용자 정의 속성과 이벤트 핸들러 또한 사용 가능합니다.

React Virtualized

• 목적: React Window와 유사하지만 더 복잡한 사용 사례를 위한 폭넓은 기능을 제공합니다.
• 주요 기능:
  • React Virtualized는 가상화된 그리드, 필터링, 정렬, 드래그 앤 드롭 등 다양한 기능을 제공합니다.
    • 가상화된 그리드는 동적인 높이 계산을 통해 사용자에게 보기 좋은 형태로 데이터가 배치됩니다.
    • 필터링 기능은 특정 조건에 맞는 항목만 표시할 수 있습니다.
    • 정렬 기능을 통해 사용자가 원하는 기준으로 리스트를 정렬할 수 있습니다.
    • 드래그 앤 드롭 기능을 통해 리스트 항목의 순서를 쉽게 변경할 수 있습니다.
    • 일부 스타일에 CSS가 필요하며, 번들 크기를 줄이기 위해 특정 구성 요소만 임포트할 수 있습니다.
    • 최적화를 위해 shallowCompare를 사용하여 props나 state가 변경되지 않으면 다시 렌더링하지 않습니다.
• 사용법: 복잡한 API 때문에 설정이 더 복잡할 수 있으며, react-window나 react-virtuoso와 비교해 애플리케이션의 번들 크기를 증가시킬 수 있습니다.
  
  

React Virtuoso

• 목적: 가변 크기 항목을 자동으로 처리하며, 다양한 기능을 제공하는 포괄적인 구성 요소 세트를 제공합니다.
• 주요 기능:
  • 수동 크기 조정 없이 가변 크기 항목을 자동으로 처리합니다.
  • 채팅 메시지 리스트
  • 스티키 헤더가 있는 그룹화된 항목
    • 리스트의 항목을 카테고리별로 그룹화 한다는 의미입니다!(제가 헷갈렸던 부분이라 풀어 적을게요!) 예를 들어, 제품 리스트가 "과일"이나 "채소"와 같은 카테고리로 나뉘어 있을 수 있습니다. 각 그룹에는 상단에 고정된 헤더가 있어 사용자가 리스트를 스크롤할 때 현재 어떤 그룹을 보고 있는지 쉽게 알 수 있게 해줍니다. 이 스티키 헤더 기능은 사용자에게 더 나은 맥락을 제공하여 사용 경험을 향상시킵니다.
  • 무한 스크롤 등을 지원합니다.
  • CSS 클래스 속성을 통해 동일한 크기의 항목을 여러 열로 표시할 수 있습니다.
• 사용법: 복잡한 리스트 뷰 구현을 단순화하여 직관적인 API로 개발자에게 사용하기 쉽게 설계되었습니다.

요약 및 마무리

• 성능: 세 라이브러리 모두 DOM 노드를 줄이고 렌더링을 최적화하여 성능을 향상시키는 데 중점을 둡니다.
• 복잡성: React Window가 가장 간단하고 경량이며, React Virtualized는 더 많은 기능을 제공하지만 복잡성이 증가합니다. React Virtuoso는 고급 기능과 사용 편의성의 균형이 좋습니다.
• 사용자 정의: 각 라이브러리는 사용자가 필요에 맞게 조정할 수 있는 다양한 옵션을 제공합니다. 특히 React Virtuoso와 React Virtualized는 스타일이나 레이아웃을 커스터마이즈하는 데 더 많은 유연성을 줍니다. 예를 들어, 사용자들은 자신만의 디자인 요구에 맞춰 항목의 크기, 색상, 배치 등을 자유롭게 변경할 수 있습니다. 
• React Window는 기본적인 리스트와 그리드, 정적인 높이를 지원하며, 필요 없는 기능들은 제거하여 가볍고 간단하게 사용할 수 있습니다. 작은 프로젝트에 적합하지만, 기능이 제한적입니다.
• React Virtualized는 많은 기능을 지원하며, 복잡한 UI/UX를 구축할 때 유용하지만, 설정이 복잡하고 파일 크기가 큰 단점이 있습니다.
• React Virtuoso는 경량화와 간편함을 추구하며, 최근 인기를 끌고 있는 라이브러리로, 필요한 기능이 많다면 다른 라이브러리와 함께 사용할 수도 있습니다.

이처럼 각 라이브러리는 각기 다른 특성과 장단점을 가지고 있으며, 프로젝트의 요구에 맞춰 선택하는 것이 중요합니다.