React에서 가상화와 필터링 결합하기

// VirtualizedFilteredList.js

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

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

export default function VirtualizedFilteredList() {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredItems = useMemo(() => {
    const term = searchTerm.toLowerCase();
    return items.filter((item) => item.name.toLowerCase().includes(term));
  }, [searchTerm]);

  return (
    <div>
      <h1>React 가상화와 필터링</h1>
      <input
        type="text"
        placeholder="검색어 입력"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <List
        height={400}
        itemCount={filteredItems.length}
        itemSize={35}
        width="100%"
      >
        {({ index, style }) => (
          <div style={{ ...style, borderBottom: '1px solid #ddd', padding: '5px' }}>
            {filteredItems[index].name}
          </div>
        )}
      </List>
    </div>
  );
}

 

//React Window와 useMemo를 결합하면 성능과 사용자 경험을 동시에 개선할 수 있음