React Hyper Scroller v3 출시!

가상 목록은 오늘날의 웹에서 필수적인 역할을 합니다. 때로는 많은 항목(수백 또는 수천 개 정도!)이 있는 목록이나 성능 면에서 비용이 많이 드는 구성 요소가 있는 목록을 렌더링해야 하기 때문입니다.

5000개의 항목이 포함된 목록을 표시해야 하는 경우 DOM에 최소 5000개의 요소를 만들어야 한다는 의미입니다. 그것은 비싸고 아마도 약간의 시간이 걸릴 것입니다. 하지만 이것이 최선의 시나리오입니다. 목록은 일반적으로 많은 요소가 있는 항목으로 구성됩니다. 모든 것을 합산하면 수천 개의 요소를 렌더링해야 합니다. 정말 비싸다!

가상 목록은 사용자 화면에 맞는 항목만 렌더링할 수 있도록 하여 이를 해결합니다. 사용자가 스크롤할 때마다 목록은 자동으로 새 항목을 렌더링하고 남겨둔 항목을 제거합니다. 사용자가 보기를 원하지 않는 한 화면에 표시되지 않는 요소에 리소스를 낭비하지 않을 것이기 때문에 이것은 굉장합니다!




저는 오늘 React 앱과 웹사이트에서 가상 목록을 사용할 수 있게 해주는 라이브러리React Hyper Scroller v3를 출시합니다. v1 가 아니라 v3 임을 알 수 있습니다. 원래 이 라이브러리는 내 프로젝트 중 하나인 Kiddle 의 문제를 해결하기 위해 만들었기 때문입니다. 이러한 문제는 스크롤 복원 및 크기를 알 수 없는 항목 목록을 렌더링하는 기능입니다.

React Hyper Scroller의 주요 기능은 이러한 문제를 해결하고 있지만 또 다른 기능은 뛰어난 DX(Developer Experience)입니다. 다음은 documentation의 예입니다.

import HyperScroller from "react-hyper-scroller";

// List of random numbers from 50 to 300 (inclusive).
// These number represent the height of each item in the list.
// We do this to simulate a list of items with unknown height.
const items = new Array(100)
  .fill(0)
  .map(() => Math.floor(Math.random() * 150) + 50);

export function MyList() {
  return (
    <HyperScroller estimatedItemHeight={175}>
      {items.map((item, index) => (
        <div key={`item-${index}`} style={{ height: item }}>
          Item {index}. Height: {item}
        </div>
      ))}
    </HyperScroller>
  );
}

명심해야 할 한 가지는 React Hyper Scroller가 모든 사용 사례에 가장 적합하지 않을 수 있다는 것입니다. 작동하지 않으면 react-window , react-virtualized 또는 react-virtual 과 같은 매우 멋진 대안이 있습니다.

React Hyper Scroller에 대해 더 알고 싶으십니까?

Documentation Website

Getting Started

GitHub Repository