개발/토막난 상식
10만건 이상의 데이터 in front (테이블 개선)
RavenKim
2024. 3. 28. 15:19
반응형
사건개요
antd table 사용중
클라이언트: 개발자님 이거 스크롤로 보고싶어요
>> 인피니티 스크롤 적용시 버버버버버벅 대는 화면을 발견
원인 너무 많은 div가 있으면 보여줄 수 가 없다
가상화 도입!!!
여기서부터 맨탈 와르르
antd 4.0 은 가상화 직접 구현
추천받은 라이브러리
https://github.com/bvaughn/react-virtualized
https://github.com/bvaughn/react-window
https://tanstack.com/virtual/latest
여기서 해보자
https://tanstack.com/virtual/latest/docs/framework/react/examples/variable
대충 가상화는 이런느낌으로 적용된다
하지만
데이터가 나오긴 하고 깨지기도 하고 나오다 말고
원인!
div에 할당 가능한 최대 높이가 존재한다
그이상은 짤립니다
https://www.ag-grid.com/react-data-grid/massive-row-count/
이와 관련해 사람들의 의견
10만건 이상의 데이터는 스크롤시 부드럽지도 못하고 너무 빠르게 넘어간다.
디자인 시스템 적으로 10만건 이상의 데이터는 페이지를 나누어서 보여줄 필요가 있다.
반응형