React에서 대규모 데이터를 가상화와 페이징으로 처리하기

// VirtualizedPagination.js

import React, { useState } from 'react';
import { FixedSizeList as List } from 'react-window';

const allItems = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
const PAGE_SIZE = 100;

export default function VirtualizedPagination() {
  const [currentPage, setCurrentPage] = useState(0);

  const startIdx = currentPage * PAGE_SIZE;
  const endIdx = startIdx + PAGE_SIZE;
  const items = allItems.slice(startIdx, endIdx);

  const totalPages = Math.ceil(allItems.length / PAGE_SIZE);

  return (
    <div>
      <h1>가상화와 페이징</h1>
      <List
        height={400}
        itemCount={items.length}
        itemSize={35}
        width="100%"
      >
        {({ index, style }) => (
          <div style={{ ...style, borderBottom: '1px solid #ddd', padding: '5px' }}>
            {items[index]}
          </div>
        )}
      </List>
      <div style={{ marginTop: '10px' }}>
        <button
          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 0))}
          disabled={currentPage === 0}
        >
          이전
        </button>
        <span style={{ margin: '0 10px' }}>
          {currentPage + 1} / {totalPages}
        </span>
        <button
          onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages - 1))}
          disabled={currentPage === totalPages - 1}
        >
          다음
        </button>
      </div>
    </div>
  );
}

 

// 가상화와 페이징을 결합하면 대규모 데이터 렌더링과 탐색이 효율적임