react-virtuoso를 사용한 렌더링 최적화

React-Virtuoso

React-Virtuoso란?

React-Virtuoso는 React 애플리케이션을 위한 최첨단 가상 리스트 라이브러리입니다.

가상 스크롤링을 사용하여 대규모 데이터 세트를 효율적으로 렌더링 하고, 사용자 경험을 향상하며, 애플리케이션의 성능을 최적화합니다.

React-Virtuoso는 동적 높이, 그룹화, 맨 위로 스크롤, 무한 로딩 등 고급 기능을 지원하여 개발자가 복잡한 목록 및 테이블을 쉽게 구현할 수 있게 해 줍니다.

React-Virtuoso와 React-Window 및 React-Virtualized 비교

장점

• 동적 높이 지원: React-Virtuoso는 항목의 높이가 동적으로 변할 수 있음을 자동으로 감지하고 최적화합니다. 이는 React-Window와 비교했을 때 두드러진 차이점이며, React-Virtualized와 비슷하지만 더 나은 성능을 제공합니다.
• 사용의 용이성: React-Virtuoso는 복잡한 설정 없이도 쉽게 사용할 수 있으며, 많은 고급 기능이 기본으로 제공됩니다. 반면, React-Virtualized는 더 많은 설정과 커스터마이징을 요구할 수 있습니다.
• 성능: React-Virtuoso는 최신 웹 기술을 활용하여 뛰어난 성능을 제공합니다. 대규모 데이터 세트의 렌더링 속도와 스크롤 성능이 React-Window나 React-Virtualized보다 우수할 수 있습니다.

단점

• 학습 곡선: React-Virtuoso의 다양한 기능과 설정 옵션 때문에 초기 사용자에게 다소 어려울 수 있습니다. 이는 React-Window가 제공하는 단순함과 대비됩니다.
• 번들 크기: React-Virtuoso는 추가 기능을 제공하기 때문에, React-Window에 비해 번들 크기가 크다는 단점이 있을 수 있습니다. 이는 초기 로딩 시간에 영향을 미칠 수 있습니다.

npm trends

 

React-Virtuoso를 사용하여 간단한 가상 리스트를 구현하는 방법을 살펴보겠습니다.

import React from 'react';
import { Virtuoso } from 'react-virtuoso';

const MyList = () => {
  const items = Array.from({ length: 10000 }, (_, index) => `항목 ${index + 1}`);

  return (
    <Virtuoso
      data={items}
      itemContent={(index, item) => (
        <div style={{ padding: '1rem', borderBottom: '1px solid #ccc' }}>
          {item}
        </div>
      )}
      style={{ height: '400px', width: '100%' }}
    />
  );
};

export default MyList;

 

이 코드는 10,000개 항목을 포함하는 가상 리스트를 생성합니다.

Virtuoso 컴포넌트는 data prop을 통해 항목 배열을 받고, 각 항목을 렌더링 하기 위한 itemContent 함수를 정의합니다.

이 예제는 간단하지만, React-Virtuoso의 기본 사용법을 잘 보여줍니다.

 

React-Virtuoso는 동적 높이 항목, 복잡한 데이터 구조, 고성능 스크롤링과 같은 고급 기능을 필요로 하는 프로젝트에 이상적인 라이브러리이며, 특히 동적 높이가 중요한 채팅과 같은 서비스에서는 React-Window 나 React-Virtualized 오히려 사용성이 훨씬 간편하다는 장점이 있습니다.

 

라이브러리를 선택할 때 주로 가장 인기 있는 라이브러리를 항상 선택해 왔는데 이번에 React-Virtuoso에 대해 알게 되며 인기 있는 라이브러리라도 불편한 점이 있다면 그 점을 보완한 라이브러리를 찾아보는 것도 좋다는 것을 알게 되었습니다.