데이터 테이블 2.2초 → 0.53초 — 가상화만으론 부족했던 이유

• 실험 데이터를 표로 모아 비교하는 화면 — 최대 1,000행·수십 열
• 한 컬럼은 문자열을 브라우저에서 매번 계산해 그리는 이미지

증상

• 가로·세로 가상화를 적용했는데도 초기 렌더가 2.2초에서 안 줄어듦
• 그리는 행 수는 분명히 줄었는데 체감이 그대로

원인

• 가상화는 그리는 개수를 줄일 뿐, 셀 개당 비용은 그대로 남음
• 무거운 이미지 컬럼에 지연 로딩을 걸었는데 useMemo로 감싸 무력화됨 — useMemo는 값 캐싱이라 렌더 중 무조건 실행됨. 뷰포트 진입 여부와 무관하게 계산이 돌고 있었음
• 계산 결과 캐시가 컴포넌트 안에 있어 언마운트마다 초기화 → 스크롤로 되돌아오면 다시 계산

조치

• useMemo를 걷어내고 뷰포트 진입을 조건으로 건 함수 호출로 변경 — 실제로 보이는 셀만 계산
• 캐시를 컴포넌트 바깥 모듈 스코프로 옮기고 상한을 둬 오래된 항목부터 버림

결과

• 초기 렌더 2.2초 → 0.53초
• 가상화 적용으로 끝나지 않음 — 컬럼 성격까지 봐야 개당 비용이 잡힘

같은 "개당 비용" 문제를 그래프에선 라이브러리를 포크해서 풀었다 → 수천 노드 트리를 10초에서 2초로