const itemHeight = 35;
 
export const NonVirtualizedList = ({
  numberOfItems,
}: {
  numberOfItems: number;
}) => {
  const listItems = Array.from({ length: numberOfItems }, (_, index) => (
    <ListItem key={index} index={index} />
  ));
 
  return (
    <ul
      className="overflow-y-scroll w-full h-[500px] border-2 border-black"
      onScroll={(e) => {
        console.log('Scrolling ', e.currentTarget.scrollTop);
      }}
    >
      {listItems}
    </ul>
  );
};
 
const ListItem = ({ index }: { index: number }) => {
  const height = `${itemHeight}px`
  return (
    <li style={{ height: height }} className="text-center">
      List Item Index - {index}
    </li>
  );
};

리액트에서 윈도윙 기술 설명

리액트에서 윈도윙 기술은 긴 데이터 목록(수백에서 수천 개 행)을 효과적으로 렌더링하기 위한 방법입니다. 이 기술을 사용하면, 한 번에 화면에 보이는 데이터만 렌더링하고 나머지는 생략하여 DOM 노드 수를 줄이고 성능을 크게 개선할 수 있습니다.

react-window와 react-virtualized는 이러한 윈도윙을 구현하는 데 많이 사용되는 라이브러리입니다. 이들은 목록, 그리드, 테이블 등 다양한 형태의 데이터를 효율적으로 렌더링할 수 있도록 돕습니다.
또한, 특정 요구 사항에 맞춰 더 세부적인 커스터마이징이 필요하다면, Twitter처럼 직접 윈도윙 구성 요소를 만들어 활용할 수도 있습니다.

import { useState } from 'react';
 
const itemHeight = 35;
const windowHeight = 500;
const overscan = 20;
 
export const VirtualizedList = ({
  numberOfItems,
}: {
  numberOfItems: number;
}) => {
  const [scrollTop, setScrollTop] = useState(0);
  const startIndex = Math.max(Math.floor(scrollTop / itemHeight) - overscan);
  const endIndex = Math.min(
    numberOfItems,
    Math.floor((scrollTop + windowHeight) / itemHeight) + overscan
  );
 
  const generateRows = () => {
    let items: JSX.Element[] = [];
    for (let i = startIndex; i < endIndex; i++) {
      items.push(<ListItem key={i} index={i} />);
    }
 
    return items;
  };
 
const windowHeight = `${windowHeight}px`
const itemHeight = `${numberOfItems * itemHeight}px`
 
  return (
    <div
      className="overflow-y-scroll w-full border-2 border-black relative"
      style={{ height: windowHeight }}
      onScroll={(e) => {
        setScrollTop(e.currentTarget.scrollTop);
      }}
    >
      <div
        style={{
          height: itemHeight,
        }}
      >
        {generateRows()}
      </div>
    </div>
  );
};
 
const ListItem = ({ index }: { index: number }) => {
  const itemHeight = `${itemHeight}px`
  const itemTop =  `${itemHeight * index}px`
  return (
    <div
      style={{
        height: itemHeight,
        top: itemTop,
        backgroundColor: index % 2 === 0 ? '#f0f0f0' : '#ffffff',
      }}
      className="text-center w-full absolute"
    >
      List Item Index - {index}
    </div>
  );
};

import { useState } from 'react';
 
const itemHeight = 35;
const windowHeight = 500;
const overscan = 20;
 
export const VirtualizedListOptimized = ({
  numberOfItems,
}: {
  numberOfItems: number;
}) => {
  const [scrollTop, setScrollTop] = useState(0);
  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
  let renderedNodesCount = Math.floor(windowHeight / itemHeight) + 2 * overscan;
  renderedNodesCount = Math.min(numberOfItems - startIndex, renderedNodesCount);
 
  const generateRows = () => {
    let items: JSX.Element[] = [];
    for (let i = 0; i < renderedNodesCount; i++) {
      const index = i + startIndex;
      items.push(<ListItem key={index} index={index} />);
    }
 
    return items;
  };
 
const windowHeight = `${windowHeight}px`
const itemHeight = `${numberOfItems * itemHeight}px`
const transform = `translateY(${startIndex * itemHeight}px)`
  return (
    <div
      className="overflow-y-scroll w-full border-2 border-black"
      style={{ height: windowHeight }}
      onScroll={(e) => {
        setScrollTop(e.currentTarget.scrollTop);
      }}
    >
      <div
        style={{
          height: itemHeight,
        }}
      >
        <div
          style={{
            transform: transform ,
          }}
        >
          {generateRows()}
        </div>
      </div>
    </div>
  );
};
 
const ListItem = ({ index }: { index: number }) => {
  const itemHeight = `${itemHeight}px`
  return (
    <div
      style={{
        height: itemHeight,
        backgroundColor: index % 2 === 0 ? '#f0f0f0' : '#ffffff',
      }}
      className="text-center w-full"
    >
      List Item Index - {index}
    </div>
  );
};