대용량 데이터 편집 시 발생하는 전체 리렌더링 병목을 부분 업데이트 구조로 개선하고 목록 가상화를 적용한 프로젝트
👉 전체 리스트 리렌더링으로 인한 성능 병목
→ Row 단위 업데이트 구조(O(N) → O(1))로 변경하고, Virtualization(React Virtuoso)을 적용하여 렌더링 범위를 화면 내 요소로 제한
| 구분 | 측정 시나리오 | 지표 | 원본(Before) | 개선본(After) |
|---|---|---|---|---|
| 렌더링 | 1,000 rows 초기 렌더 | Initial Render Time | 4,918ms | 139.33ms |
| 렌더링 | Row 1개 수정 | 리렌더 Row 수 | 1,000 Rows | 1 Row |
| 스크롤 | 3,000 rows 리스트 스크롤 | Max Frame Duration | 149ms | 33.4ms |
| 스크롤 | 3,000 rows 리스트 스크롤 | Worst FPS 환산 | 약 6.7 FPS | 약 29.9 FPS |
| 스크롤 | 3,000 rows 리스트 스크롤 | Long Task 수 (>50ms) | 19건 | 1건 |
| 인터랙션 | 검색어 3글자 입력 | Interaction Latency | 1,330ms | 29ms |
| 가상화 | 1,000 rows / 22컬럼 | Total DOM Nodes 수 | 64,458 | 1,977~4,103 |
| 메모리 | 1,000 rows 모두 로드 | Heap Memory | 179MB | 8.9~13.9MB |
**아래 영상은 테스트용 더미데이터(10만건)로 구성된 화면이며, 실제 개인정보를 포함하고 있지 않습니다.