📌 배경

• Windowing이란, 대규모 데이터를 효율적으로 렌더링하기 위한 기술입니다. 보이는 부분만 렌더링하고 나머지는 필요할 때 로드하는 방식으로 작동합니다. 특히 무한 스크롤이나 긴 목록을 다룰 때 유용하게 사용됩니다.
• 대표적으로 react-window와 react-virtualized 라이브러리가 존재하는데, react-window가 더 가벼운 사이즈를 가지고 있어, 최소 기능만 필요하다면 react-window를 사용하는 것을 공식문서에서도 추천하고 있습니다.

<aside> 📌

4줄 요약

1. react-windowing을 구현하기 위해서는 react-window와 virtualization라이브러리를 통해 List와 Grid형태로 구현할 수 있습니다.
2. AutoSizer와 InfiniteLoader로 react-window의 px, 무한스크롤 단점을 보완합니다.
3. InfiniteLoader를 사용할 때는 List에서는 잘 작동하지만, Grid는 추가구현이 필요합니다.
4. windowing, RN은 기본적으로 지원해주지만, 웹에서는 알아서 구현해야 합니다. (하지만, CSS의 content-visibility가 있다고 합니다!) </aside>

🧪 적용하기

• List형태를 구현할 때는 FixedSizeList를 사용할 수 있습니다.
• Grid형태를 구현할 때는 FixedSizeGrid를 사용할 수 있습니다.
• 공식문서에서 제공하는 간단한 예시입니다.

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

import './styles.css';

const Row = ({ index, style }) => (
  <div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
    Row {index}
  </div>
);

const Example = () => (
  <List
    className="List"
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

렌더링 테스트(98% 개선)

• 10만개의 데이터로 테스트를 했을 때, 렌더링 시간이 976ms → 16ms, 약 98% 감소한 것을 볼 수 있었습니다.

• 적용 전 (976ms)

  

• 적용 후 (16ms)