Plot Chart 드래그 렌더링 비용 80% 감소

• 대규모 실험 데이터 분석 도구의 산점도 화면 — 마커에 라벨을 붙이고 드래그로 옮기는 UI
• 규모: 한 페이지 그래프 최대 50개 · 그래프당 마커 최대 1,000개

증상

• 라벨 하나를 드래그하면 차트 전체가 다시 그려져 프레임이 끊김
• 마커 위를 훑기만 해도 연동된 테이블(수백 행)까지 재렌더

원인

• React Profiler로 측정 — 드래그 중 좌표가 매 프레임 전역 상태에 반영됨
• 그 상태를 구독하는 마커·라벨이 전부 함께 리렌더. 바뀐 건 하나인데 수백 개가 다시 그려짐
• 차트↔테이블 호버 연동도 전역 store를 경유해 같은 문제를 반복

조치

• 움직이는 값은 지역 상태로 — 드래그 중 좌표는 그 라벨 안에만 두고, 드롭 시점의 최종 좌표만 전역 반영
• 연동은 상태 대신 이벤트로 — 호버한 쪽이 대상만 발행하고 필요한 쪽이 구독해 지역 처리. 전역 상태를 거치지 않아 구독 컴포넌트 전체 리렌더가 사라짐
• 이벤트에 출처를 실어 자기가 쏜 이벤트에 되반응하는 피드백 루프를 차단
• 마커 컴포넌트는 memo로 감싸 props가 같으면 건너뜀

결과

• 드래그·상호작용 시 JS 실행 사용량 80% 감소 (Profiler 측정)