React에서 무한 스크롤과 가상화를 결합하여 성능 최적화하기

npm install react-window react-intersection-observer

 

 

InfiniteScrollVirtualized.js

import React, { useState, useEffect, useCallback } from 'react';
import { FixedSizeList as List } from 'react-window';
import { useInView } from 'react-intersection-observer';

const PAGE_SIZE = 20;
const TOTAL_ITEMS = 1000;

export default function InfiniteScrollVirtualized() {
  const [items, setItems] = useState(Array.from({ length: PAGE_SIZE }, (_, i) => `Item ${i + 1}`));
  const [page, setPage] = useState(1);
  const { ref, inView } = useInView();

  const loadMoreItems = useCallback(() => {
    if (items.length < TOTAL_ITEMS) {
      setTimeout(() => {
        setItems((prev) => [
          ...prev,
          ...Array.from({ length: PAGE_SIZE }, (_, i) => `Item ${prev.length + i + 1}`),
        ]);
        setPage((prev) => prev + 1);
      }, 500);
    }
  }, [items.length]);

  useEffect(() => {
    if (inView) loadMoreItems();
  }, [inView, loadMoreItems]);

  return (
    <div>
      <h1>무한 스크롤 + 가상화</h1>
      <List height={400} itemCount={items.length} itemSize={35} width="100%">
        {({ index, style }) => (
          <div ref={index === items.length - 1 ? ref : null} style={style}>
            {items[index]}
          </div>
        )}
      </List>
    </div>
  );
}

 

 

무한 스크롤과 가상화를 결합하면 성능과 UX를 동시에 개선할 수 있음