게시판 만들기 (4) 가상 테이블 (react-window vs react-virtualized)

 

게시판을 만들 때 테이블 리스트, 알람 리스트 를 만들 때 가상 테이블을 사용하여 효율을 향상시킬 수 있습니다.

가상화란 현재 페이지에 보이는 부분만 렌더링하여 더 빠르고, 효율적인 성능이 나오게 합니다.

 

가장 대표적인 가상화 테이블의 라이브러리로는 react-window와 react-virtualized가 있습니다.

한동안 react-virtualized가 react-window 보다 사용자수가 많았는데 갑자기 사용자가 역전이 되어있네요.

react-virtualized가 용량이 약2~3배 가량 높고, 그만큼 좀 더 많은 기능을 제공하는 것 같지만,

저는 단순히 테이블 요소만 리스팅하기만 하면 되므로 비교적 용량이 적은 react-window를 사용하겠습니다.

---

# Yarn
yarn add react-window

# NPM
npm install --save react-window

 

const Page = () => {
  ... code

  const Row = ({ index, style, data }) => (
    <div style={{ ...style, margin: '5px 0' }}>  // 마진을 추가로 설정
      <AlarmRow key={index} alarm={data} />
    </div>
  );

  if (alarmListRC && alarmListRC.length > 0) {
    return (
    	//실제 아이템의 사이즈는 45이지만 위에서 마진을 5씩 위아래로 더했기에 10 추가
      <List height={150} itemCount={alarmListRC.length} itemSize={55} width='85%' itemData='Additional Data'>
        {({ index, style }) => Row({ index, style, data: alarmListRC[index] })}
      </List>
    );
  } else return <div> 활동 알람이 없습니다. </div>;
};

export default Page;

 

 

다음과 같이 아이템이 테이블로 잘나왔습니다.

아이템의 개수가 현재 3개밖에안되지만, 많아졌을 때의 결과물들을 나중에 한번 더 보겠습니다.