List Virtualization

리스트 가상화를 적용해 다량의 렌더링 성능을 최적화한다

이 글에선 목록 가상화(윈도잉으로도 알려진)를 다룰 것이다. 이는 동적 목록을 렌더링할 때 전체 목록을 렌더링하지 않고 화면에 보이는 콘텐츠의 행들만 렌더링하는 것이다. 렌더링된 행들은 전체 목록 중 사용자의 스크롤에 따라 움직이는 화면(윈도우)에 보이는 것들만 추린 작은 부분 집합이다. 이는 렌더링 성능 향상으로 이어질 수 있다.

만약 React를 사용하여 큰 규모의 목록을 효율적으로 보여줘야 한다면, react-virtualized가 익숙할 수 있다. Brian Vaughn이 만든 윈도잉 라이브러리로, 목록에서(스크롤 되는 뷰포트 내에서) 현재 보이는 항목들만 렌더링한다. 이는 몇 천개 행의 데이터를 한 번에 렌더링하기 위한 수고를 감수하지 않아도 됨을 뜻한다. react-window를 이용한 목록 가상화 구현 방법을 소개하고 있는 영상도 있으니 참고하길 바란다.

목록 가상화는 어떤 방식으로 동작하는가?

목록의 항목들을 “가상화”하기 위해선 윈도우를 고정시키고 목록 주변에서 윈도우를 움직여야 한다. react-virtualized의 윈도잉이 동작하기 위해선 아래 요소들이 필요하다:

(window) relative 포지션 속성을 가지는 작은 컨테이너 돔 엘리먼트(e.g <ul>)
스크롤을 위한 큰 돔 엘리먼트
컨테이너 내부에 위치하고 absolute 포지션 속성을 가지며 top, left, width, height 속성을 설정한 자식 요소들

목록 가상화는 목록의 1000여개의 요소들을 일시에 렌더링(초기 렌더링 지연이나 스크롤 성능에 영향을 줄 수 있는)하지 않고 사용자에게 보이는 아이템만 렌더링하는 데에 중점을 두고 있다.

이는 중·저사양의 기기들에서 목록을 빠르게 렌더링하는 데 도움을 준다. 이전 아이템들을 제거하고 새로운 아이템들로 교체하면서, 사용자의 스크롤에 따라 더 많은 아이템들을 불러오고 보여줄 수 있다.

react-virtualized의 더 작은 대안

react-window는 react-virtualized의 저자가 용량이 더 작고, 빠르고, tree-shakable하게 만든 라이브러리다.

tree-shakable한 라이브러리의 크기는 어떤 API를 사용하기로 선택했느냐에 따라 달라진다. react-virtualized의 경우, ~20-30KB(gzipped)까지 용량을 줄일 수 있었다:

두 라이브러리의 API는 대부분 비슷하지만, react-window가 조금 더 심플하다. react-window는 다음과 같은 컴포넌트들을 포함하고 있다:

List

목록은 윈도윙된 요소들의 목록(행), 즉 사용자에게 현재 보여지는 요소들(e.g FixedSizeList, VariableSizeList)만 렌더링한다. 그리드를 이용해 행들을 렌더하며 props를 내부 그리드에 전달한다.

list virtualization04

React로 데이터 목록 렌더링하기

React를 이용해 간단한 데이터 목록(itemsArray)을 렌더링하는 예제이다:

import React from "react";
import ReactDOM from "react-dom";

const itemsArray = [
  { name: "Drake" },
  { name: "Halsey" },
  { name: "Camillo Cabello" },
  { name: "Travis Scott" },
  { name: "Bazzi" },
  { name: "Flume" },
  { name: "Nicki Minaj" },
  { name: "Kodak Black" },
  { name: "Tyga" },
  { name: "Buno Mars" },
  { name: "Lil Wayne" }, ...
]; // our data

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    {itemsArray[index].name}
  </div>
);

const Example = () => (
  <div
    style=
    class="List"
  >
    {itemsArray.map((item, index) => Row({ index }))}
  </div>
);

ReactDOM.render(<Example />, document.getElementById("root"));

react-window로 목록 렌더링하기

이번엔 동일한 예제를 react-window의 FixedSizeList를 이용해 구현한 것이다. 몇 개의 props(width, height, itemCount, itemSize)를 받고, 행을 렌더링하는 함수를 자식으로 받는다:

import React from "react";
import ReactDOM from "react-dom";
import { FixedSizeList as List } from "react-window";

const itemsArray = [...]; // our data

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    {itemsArray[index].name}
  </div>
);

const Example = () => (
  <List
    className="List"
    height={150}
    itemCount={itemsArray.length}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

ReactDOM.render(<Example />, document.getElementById("root"));

CodeSandbox에서 FixedSizeList를 테스트해볼 수 있다.

Grid

그리드는 세로축과 가로축(e.g FixedSizeGrid, VariableSizeGrid)을 따라 테이블 성격의 데이터를 가상화해서 렌더링한다. 현재 수평/수직 스크롤 위치에 따라 채워져야 하는 그리드 셀들만 렌더링한다.

list virtualization05

그리드 레이아웃을 이용해 위에서 사용한 것과 동일한 목록을 렌더하고 싶다면, 다차원 배열이라고 가정할 때, FixedSizeGrid를 이용해 다음과 같이 구현할 수 있다:

import React from 'react';
import ReactDOM from 'react-dom';
import { FixedSizeGrid as Grid } from 'react-window';

const itemsArray = [
  [{},{},{},...],
  [{},{},{},...],
  [{},{},{},...],
  [{},{},{},...],
];

const Cell = ({ columnIndex, rowIndex, style }) => (
  <div
    className={
      columnIndex % 2
        ? rowIndex % 2 === 0
          ? 'GridItemOdd'
          : 'GridItemEven'
        : rowIndex % 2
          ? 'GridItemOdd'
          : 'GridItemEven'
    }
    style={style}
  >
    {itemsArray[rowIndex][columnIndex].name}
  </div>
);

const Example = () => (
  <Grid
    className="Grid"
    columnCount={5}
    columnWidth={100}
    height={150}
    rowCount={5}
    rowHeight={35}
    width={300}
  >
    {Cell}
  </Grid>
);

ReactDOM.render(<Example />, document.getElementById('root'));

CodeSandbox에서 FixedSizeGrid를 테스트해볼 수 있다.

더 많은 react-window 심화 예제들

Scott Taylor는 react-window와 FixedSizeGrid를 이용해 오픈소스 Pitchfork music reviews scraper (src) 를 구현했다. 이를 실제로 적용한 앱을 아래 영상에서 확인할 수 있다:

Pitchfork scraper는 react-window-infinite-loader (demo)를 이용해 큰 규모의 데이터를 화면 안으로 스크롤될 때만 로딩되는 작은 덩어리들로 분할한다.

실제 앱에선 아래와 같이 react-window-infinite-loader를 이용해 코드를 작성한다:

import React, { Component } from 'react';
import { FixedSizeGrid as Grid } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
...
  render() {
    return (
      <InfiniteLoader
        isItemLoaded={this.isItemLoaded}
        loadMoreItems={this.loadMoreItems}
        itemCount={this.state.count + 1}
      >
        {({ onItemsRendered, ref }) => (
          <Grid
            onItemsRendered={this.onItemsRendered(onItemsRendered)}
            columnCount={COLUMN_SIZE}
            columnWidth={180}
            height={800}
            rowCount={Math.max(this.state.count / COLUMN_SIZE)}
            rowHeight={220}
            width={1024}
            ref={ref}
          >
            {this.renderCell}
          </Grid>
        )}
      </InfiniteLoader>
    );
  }
}

react-virtualized에서 전환할 계획이 있다면 이 커밋을 참고하자.

FixedSizeList를 이용해 Pitchfork scraper를 구현하는 것도 가능하다 (demo, demo on Pixel):

실제 구현 코드는 아래와 같다:

return (
  <InfiniteLoader
    isItemLoaded={this.isItemLoaded}
    loadMoreItems={this.loadMoreItems}
    itemCount={this.state.count}
  >
    {({ onItemsRendered, ref }) => (
      <section>
        <FixedSizeList
          itemCount={this.state.count}
          itemSize={ROW_HEIGHT}
          onItemsRendered={onItemsRendered}
          height={this.state.height}
          width={this.state.width}
          ref={ref}
        >
          {this.renderCell}
        </FixedSizeList>
      </section>
    )}
  </InfiniteLoader>
)

만약 더 복잡한 그리드 가상화에 대한 해결책이 필요한 경우엔 어떻게 할까? The Movie Database 데모앱은 react-virtualized와 Infinite Loader를 사용해서 이 문제를 해결한다.

react-window와 react-window-infinite-loader로의 전환은 오래 걸리진 않지만, 몇몇 컴포넌트는 아직 지원하지 않고 있다. 그럼에도, 기능 구현은 거의 완료된 상태이다.

list virtualization06

빠진 컴포넌트는 WindowScroller와 AutoSizer이다… 이는 아래에서 살펴볼 것이다.

...
    return (
      <section>
        <AutoSizer disableHeight>
          {({width}) => {
            const {movies, hasMore} = this.props;
            const rowCount = getRowsAmount(width, movies.length, hasMore);
            ...
            return (
              <InfiniteLoader
                ref={this.infiniteLoaderRef}
                ...
                {({onRowsRendered, registerChild}) => (
                  <WindowScroller>
                    {({height, scrollTop}) => (

react-window에서 어떤 부분들이 빠졌는가?

react-window는 아직 react-virtualized의 모든 API를 지원하고 있지 않기 때문에, 사용을 고려하고 있다면 비교 문서를 확인해보자. 어떤 부분들이 빠졌는가?

WindowScroller - window 스크롤 위치에 맞춰 목록을 스크롤할 수 있도록 도와주는 react-virtualized의 컴포넌트이다. 아직 react-window에 추가될 계획은 없기 때문에 직접 구현해야 한다.
AutoSizer - 현재 영역에서 가능한 최대 길이와 높이를 가지는 HOC이며, 자동적으로 단일 자식에게 그 길이와 높이를 부여한다. Brian이 이를 독립적인 패키지로 구현했다. 관련 최신 이슈는 여기서 확인할 수 있다.
CellMeasurer - 사용자에게 보이지 않도록 임시로 렌더링하여 셀 내 콘텐츠를 측정하는 HOC이다. 지원에 관한 논의는 여기서 확인할 수 있다.

빠진 기능들을 봤을 때, 대부분의 경우 react-window만 사용해도 충분할 것이다.

웹 플랫폼의 발전

몇몇 모던 브라우저들은 현재 CSS content-visibility를 지원한다. content-visibility:auto는 필요해지기 전에는 콘텐츠를 렌더링, 페인팅하지 않는다. 길이가 길어 렌더링에 비용이 소요되는 HTML 문서라면, 이 속성을 사용해보는 것을 고려해보자.

동적 콘텐츠 목록을 렌더링할 경우에는, 여전히 react-window 같은 라이브러리를 사용하는 것을 추천한다. 오늘날 대부분의 목록 가상화 라이브러리가 화면에 보이지 않을 때 display:none을 적용하거나 돔 노드들을 제거하는 방식을 적극적으로 사용하고 있기 때문에 content-visbility:hidden을 구현한 라이브러리를 찾기는 쉽지 않다.

추가 참고 자료

react-window와 react-virtualized에 대해 더 자세히 알고 싶다면 아래 자료를 참고하자: