10만건 이상의 데이터 in front (테이블 개선)

사건개요

 

antd table 사용중

 

클라이언트: 개발자님 이거 스크롤로 보고싶어요  

>> 인피니티 스크롤 적용시 버버버버버벅 대는 화면을 발견 

 

원인 너무 많은 div가 있으면 보여줄 수 가 없다 

 

가상화 도입!!! 

여기서부터 맨탈 와르르 

 

antd 4.0 은 가상화 직접 구현 

 

 

 

 

추천받은 라이브러리 

 

https://github.com/bvaughn/react-virtualized

GitHub - bvaughn/react-virtualized: React components for efficiently rendering large lists and tabular data

https://github.com/bvaughn/react-window

GitHub - bvaughn/react-window: React components for efficiently rendering large lists and tabular data

https://tanstack.com/virtual/latest

TanStack Virtual | React Virtual, Solid Virtual, Svelte Virtual, Vue Virtual

 

 

 

 

여기서 해보자 

https://tanstack.com/virtual/latest/docs/framework/react/examples/variable

React Virtual Variable Example | TanStack Virtual Docs

 

 

대충 가상화는 이런느낌으로 적용된다 

 

 

하지만 

 

데이터가 나오긴 하고 깨지기도 하고 나오다 말고 

 

 

원인! 

div에 할당 가능한 최대 높이가 존재한다 

그이상은 짤립니다
https://www.ag-grid.com/react-data-grid/massive-row-count/

React Grid: Massive Row Count | AG Grid

 

 

 

 

 

이와 관련해 사람들의 의견

 

10만건 이상의 데이터는 스크롤시 부드럽지도 못하고 너무 빠르게 넘어간다. 

 

디자인 시스템 적으로 10만건 이상의 데이터는 페이지를 나누어서 보여줄 필요가 있다.