수천 노드 트리를 10초에서 2초로 — 라이브러리를 포크해서

• 수천 개 노드의 계층형 트리 시각화 — 데이터의 계층 구조를 펼쳐 보는 화면

증상

• 첫 렌더에 10초, 노드가 1,000개를 넘으면 페이지가 멈춤

원인

• 리스트 가상화 라이브러리를 쓸 수 없음 — 리스트는 n번째 = n × 높이로 위치가 계산되지만, 그래프는 레이아웃 엔진이 뱉는 임의의 2D 좌표라 인덱스와 위치 사이에 규칙이 없음
• 라이브러리를 포크해 내부를 뜯어보니 비용이 두 군데 — 노드 안 이미지를 매번 계산해 그리는 것(1,000개면 1,000번), 그리고 무관한 상태 변화에도 전체 노드가 리렌더되는 것

조치

• 그래프 라이브러리를 모노레포 workspace 패키지로 포크해 내부를 직접 수정
• 뷰포트에 들어온 노드만 이미지를 계산하고, 계산 결과는 모듈 스코프 캐시에 남겨 재계산 회피
• 노드 컴포넌트를 memo로 감싸 리렌더를 노드 단위로 한정
• 껍데기를 먼저 그리는 스켈레톤으로 체감 대기 완화

결과

• 첫 렌더 10초 → 2초
• 라이브러리를 쓰는 것과 고치는 것의 경계는 내부 비용을 읽었는지에서 갈림

같은 "개당 비용" 문제를 테이블에서도 만났다 → 데이터 테이블 2.2초 → 0.53초