[React] 가상화, react-virtualized

가상화란 다수의 항목을 화면에 보이는 요소만 렌더링하고 그 외에는 렌더링 하지 않는 기술이다.

 

예를 들어, 2500개의 리스트 항목이 있을 때, 2500개의 항목에 대해 브라우저다 전부 DOM으로 만들어 렌더링 하려면 렌더링 시간이 오래 걸리게 된다. 이를 해결하기 위해 가상화를 사용하는데, 사용자가 현재 보고 있는 화면의 영역(뷰포트)의 항목만 렌더링하고 스크롤 시에 보이는 항목만 동적으로 추가/제거한다.

 

설치&사용

npm install react-virtualized
yarn add react-virtualized

 

위의 명령어를 통해 react-virtualized를 설치해준다.

 

기본적으로 List , Table , Grid 등의 컴포넌트가 제공된다.

<List
  width={width}
  height={height}
  rowCount={2500}
  rowHeight={40}
  rowRenderer={({ index, key, style }) => (
    <div key={key} style={style}>
      Item #{index}
    </div>
  )}
/>

 

위와 같은 형식으로 사용할 수 있다.

 

“가상화에선 스크롤 시에도 끊기지 않고 보이는 이유?”

가상화를 사용하지 않은 일반 리스트에서는 2500개의 항목에 대해 전부 렌더링을 진행하게 된다.

브라우저의 메인 스레드는 멀티 스레드가 아니기 때문에, DOM을 생성하고, 스타일을 계산하고, 배치하고, 페인팅하는 렌더링 하는 과정을 모든 항목에 대해서 반복하게 된다. 이 과정에서 항목이 많아서 렌더링 작업이 무거워지면 브라우저가 일정 시간 안에 화면을 그리지 못해 프레임 드랍이 발생한다.

브라우저는 설정된 FPS(기본적으로 60FPS) 으로 동작하려고 하는데, 60FPS의 경우 16.67ms내에 모든 작업을 끝내야 한다. 하지만 할당된 작업을 16.67ms안에 끝내지 못하게 되면, 다음 프레임으로 작업을 넘기는 프레임 드랍이 발생하게 된다. 이 때문에 스크롤 시에 끊김이 발생한 것처럼 보이게 된다.

그런데 이런 문제를 가상화를 적용하게 되면, 화면에 보이는 영역(뷰포트)내의 요소들만 렌더링을 시도하기 때문에 프레임 드랍이 발생하지 않는다.