# react-window
총 1개의 포스트

가상화 테크닉으로 React Table 성능 개선하기 (with react-virtuoso)
React Table은 Table을 그리는데 필요한 다양한 API와 무엇보다도 useRowSelect를 활용한 행 단위 데이터 선택 기능을 제공하고 있어 테이블 상에서 이뤄지는 다양한 작업을 커버하기에 유용한 라이브러리이다. 하지만 React Table의 단점은 무겁다는 것이다. 업무에서는 fetch한 데이터를 다양한 방식으로 가공하여 React Table로 렌더하고, 렌더된 DOM 상에서 사용자가 인터렉션할 수 있도록 여러 기능을 제공하는데 하나의 테이블에 워낙 많은 기능이 들어가다 보니 일반 사용자가 느끼기에도 현저하게 성능이 저하되는 문제가 발생하였다. 지금 개발중인 프로덕트는 infinite scrolling 방식으로 동작하는데, 첫번째 로드 시 50개 리스트를 불러오고, concat으로 추가 fetch 요청이 발생할 때마다 50개씩 리스트를 덧붙이면서 로드되는 속도가 리스트의 갯수에 비례하여 현저히 느려졌다. 이런 성능 저하에 기여한 요인 중에 상당한 부분이 React
2023년 5월 22일
·
0개의 댓글·
0