[React] React-Virtualized: 엄청난 양의 데이터도 가볍게 렌더링하기! 🚀

React-Virtualized 톺아보기! 🚀

리액트로 개발하다 보면 무수히 많은 데이터를 테이블, 리스트, 또는 그리드 형태로 렌더링해야 할 때가 있어요. 하지만 화면에 보이지 않는 데이터까지 전부 렌더링하면 브라우저가 느려지고, 사용자 경험이 저하될 수 있죠. 여기서 등장하는 해결사가 바로 React-Virtualized입니다!

---

React-Virtualized란? 🚁

React-Virtualized는 긴 리스트나 테이블을 효율적으로 렌더링하기 위한 라이브러리입니다. 보이는 영역(viewport)에 해당하는 데이터만 렌더링하고, 스크롤에 따라 동적으로 아이템을 생성하거나 제거하여 성능을 최적화합니다.

 

👉 가상화(Virtualization): 필요한 데이터만 ‘보이는 만큼’ 그려줌으로써 DOM을 가볍게 유지하는 기술입니다.

---

왜 React-Virtualized를 써야 할까?

1. 성능 최적화

브라우저는 수천 개의 DOM 요소를 한 번에 처리하기 어려워요. React-Virtualized는 필요한 DOM만 생성하여 메모리 사용량을 줄이고, 렌더링 속도를 높입니다.

 

2. 다양한 기능 제공

리스트, 그리드, 테이블 같은 UI 요소를 최적화된 방식으로 렌더링할 수 있는 컴포넌트를 제공합니다.

 

3. 간편한 사용법

쉽게 설치하고 필요한 컴포넌트를 선택적으로 사용할 수 있어요.

---

주요 컴포넌트

React-Virtualized는 여러 컴포넌트를 제공하지만, 핵심 컴포넌트는 아래와 같습니다.

 

1. List

스크롤 가능한 긴 리스트를 렌더링할 때 사용합니다.

2. Grid

행(row)과 열(column)로 구성된 데이터(예: 대규모 테이블)를 렌더링할 때 유용합니다.

 

3. AutoSizer

화면 크기에 따라 컴포넌트 크기를 동적으로 조정합니다.

 

4. InfiniteLoader

무한 스크롤 기능을 구현할 때 사용합니다.

---

설치하기

먼저 라이브러리를 설치해야겠죠?

npm install react-virtualized
# 또는
yarn add react-virtualized

---

기본 사용법

리스트(List) 컴포넌트

긴 리스트를 렌더링하는 가장 기본적인 사용 예제입니다.

import React from "react";
import { List } from "react-virtualized";

const rowCount = 1000; // 1,000개의 리스트 아이템
const rowHeight = 50; // 각 아이템의 높이

const rowRenderer = ({ key, index, style }) => (
  <div key={key} style={style}>
    Row #{index}
  </div>
);

function App() {
  return (
    <List
      width={300} // 리스트 너비
      height={300} // 리스트 높이
      rowHeight={rowHeight} // 각 아이템의 높이
      rowCount={rowCount} // 총 아이템 개수
      rowRenderer={rowRenderer} // 각 아이템 렌더링 방식
    />
  );
}

export default App;

---

그리드(Grid) 컴포넌트

테이블 형태의 데이터를 렌더링할 때 사용합니다.

import React from "react";
import { Grid } from "react-virtualized";

const cellRenderer = ({ columnIndex, key, rowIndex, style }) => (
  <div key={key} style={style}>
    Cell {rowIndex}, {columnIndex}
  </div>
);

function App() {
  return (
    <Grid
      cellRenderer={cellRenderer} // 셀 렌더링 방식
      columnCount={10} // 열의 개수
      columnWidth={100} // 각 열의 너비
      height={300} // 그리드 높이
      rowCount={10} // 행의 개수
      rowHeight={50} // 각 행의 높이
      width={800} // 그리드 너비
    />
  );
}

export default App;

---

AutoSizer와 함께 사용하기

화면 크기에 맞게 리스트 또는 그리드의 크기를 자동으로 조정하려면 AutoSizer를 사용합니다.

import React from "react";
import { List, AutoSizer } from "react-virtualized";

const rowRenderer = ({ key, index, style }) => (
  <div key={key} style={style}>
    Row #{index}
  </div>
);

function App() {
  return (
    <AutoSizer>
      {({ width, height }) => (
        <List
          width={width}
          height={height}
          rowHeight={50}
          rowCount={1000}
          rowRenderer={rowRenderer}
        />
      )}
    </AutoSizer>
  );
}

export default App;

---

InfiniteLoader로 무한 스크롤 구현하기

무한 스크롤을 구현하고 싶다면 InfiniteLoader를 활용하세요.

import React, { useState } from "react";
import { List, InfiniteLoader } from "react-virtualized";

const rowCount = 1000;
const loadMoreRows = ({ startIndex, stopIndex }) =>
  new Promise((resolve) => {
    console.log(`Loading rows ${startIndex} to ${stopIndex}`);
    setTimeout(resolve, 1000); // API 호출 시뮬레이션
  });

const rowRenderer = ({ key, index, style }) => (
  <div key={key} style={style}>
    Row #{index}
  </div>
);

function App() {
  const [loadedRowsMap, setLoadedRowsMap] = useState({});
  const isRowLoaded = ({ index }) => !!loadedRowsMap[index];

  return (
    <InfiniteLoader
      isRowLoaded={isRowLoaded}
      loadMoreRows={loadMoreRows}
      rowCount={rowCount}
    >
      {({ onRowsRendered, registerChild }) => (
        <List
          width={300}
          height={300}
          rowHeight={50}
          rowCount={rowCount}
          onRowsRendered={onRowsRendered}
          ref={registerChild}
          rowRenderer={rowRenderer}
        />
      )}
    </InfiniteLoader>
  );
}

export default App;

---

React-Virtualized의 장점

1. 퍼포먼스: 수천 ~ 수백만 개의 데이터를 다룰 때도 렌더링이 빠릅니다.
2. 유연성: 리스트, 테이블, 그리드 등 다양한 UI를 지원합니다.
3. 메모리 효율성: 가상화로 불필요한 DOM 생성 방지.

---

주의사항

1. 스타일 지정: 각 항목은 style 속성을 통해 위치와 크기를 설정해야 합니다.
2. 렌더링 비용: rowRenderer와 같은 렌더링 함수는 가벼운 연산만 수행해야 합니다.
3. 다른 라이브러리와의 비교: react-window는 React-Virtualized의 가벼운 대안으로 더 나은 성능을 제공할 수 있습니다.

 

React-Virtualized를 활용하면 데이터 양이 많아도 성능 좋은 리스트나 테이블을 쉽게 구현할 수 있어요. 처음엔 약간 복잡해 보일 수 있지만, 한 번 익히면 프로젝트에서 강력한 도구로 활용할 수 있습니다!

 

🌷전설의 개발자가 되어봅시당! 🌷