React Window로 동적 항목 높이와 컬럼 레이아웃 구현

동적 높이를 처리하는 리스트 파일: VariableHeightList.js

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

const items = Array.from({ length: 1000 }, (_, i) => ({
  id: i,
  content: `Item ${i + 1}`,
  height: 30 + (i % 5) * 10, // 동적 높이 설정
}));

export default function VariableHeightList() {
  const getItemSize = (index) => items[index].height;

  return (
    <List
      height={400}
      itemCount={items.length}
      itemSize={getItemSize}
      width="100%"
    >
      {({ index, style }) => (
        <div style={{ ...style, borderBottom: '1px solid #ddd', padding: '5px' }}>
          {items[index].content}
        </div>
      )}
    </List>
  );
}

 

컬럼 레이아웃 파일: GridLayout.js

import React from 'react';
import { VariableSizeGrid as Grid } from 'react-window';

const rows = 1000;
const columns = 1000;

export default function GridLayout() {
  const getColumnWidth = (index) => 100 + (index % 3) * 20; // 동적 너비
  const getRowHeight = (index) => 30 + (index % 4) * 10; // 동적 높이

  return (
    <Grid
      columnCount={columns}
      rowCount={rows}
      columnWidth={getColumnWidth}
      rowHeight={getRowHeight}
      height={400}
      width={800}
    >
      {({ columnIndex, rowIndex, style }) => (
        <div style={{ ...style, border: '1px solid #ddd', textAlign: 'center' }}>
          {`Row ${rowIndex}, Col ${columnIndex}`}
        </div>
      )}
    </Grid>
  );
}

 

VariableSizeList와 VariableSizeGrid를 활용하면 복잡한 데이터 레이아웃도 효율적으로 구현 가능