Windowing 기법을 적용한 대용량 고성능 표 컴포넌트 개발기
프론트엔드
Windowing 기법을 적용한 대용량 고성능 표 컴포넌트 개발기
두줄요약
웹브라우저에서 대용량 데이터를 고성능으로 보여주기 위한 Windowing 기법과 React Virtualization을 소개했습니다. Big Table 구현 사례를 통해 성능 최적화 포인트와 한계도 공유했습니다.
핵심 내용
- 웹브라우저에서 대용량 데이터를 고성능으로 표현하기 위한 Windowing 기법과 React의 Virtualization 개념 소개
- react-virtualized, react-window, @tanstack/react-virtual 등 오픈소스 비교와 활용 사례 정리
- 대용량 고성능 표 컴포넌트 Big Table 개발 과정에서의 적용 배경과 구현 포인트 공유
구조와 흐름
- 데이터 범위 계산과 불필요한 re-render 방지용 Key 활용
- Overscan, Bottom Threshold, 컬럼 가상화, 고정 헤더/컬럼, 행 접고/펴기 지원
성능/운영 포인트
- 30만 건 데이터 로드와 스크롤 성능 개선
- resize, scroll, 접기/펼치기 같은 상호작용에서의 동작 최적화
- 자체 개발을 통해 얻은 제어 가능성과 한계 인식