React에서 대규모 데이터 처리와 가상화(Virtualization)

// npm install react-window

 

// VirtualizedList.js

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

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

export default function VirtualizedList() {
  return (
    <div>
      <h1>React Virtualized List</h1>
      <List
        height={400} // 리스트의 높이
        itemCount={items.length} // 항목 개수
        itemSize={35} // 각 항목의 높이
        width="100%" // 리스트의 너비
      >
        {({ index, style }) => (
          <div style={style}>
            {items[index]}
          </div>
        )}
      </List>
    </div>
  );
}

 

// App.js

import React from 'react';
import VirtualizedList from './VirtualizedList';

export default function App() {
  return (
    <div>
      <VirtualizedList />
    </div>
  );
}

 

// React Window를 활용하면 대규모 데이터를 효율적으로 처리 가능