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