Canvas 에디터 Transformer 최적화 성능 테스트 기록

🔍 테스트 환경

• 브라우저: Chrome 114 (MacBook Pro M2)
• 프로젝트: Next.js 14 + React-Konva 기반 Canvas 에디터
• 측정 코드: handleTransformEnd 이벤트마다 performance.now()로 처리 시간(ms) 로깅
• 반복 횟수: 10회씩 평균 값 여러 번 실행 → 평균 계산

// CanvasElementsRender.tsx (핵심 부분)
const handleTransformEnd = (id: string, e: Konva.KonvaEventObject<Event>) => {
  const start = performance.now();

  // … updateElement 로직, batchDraw() 호출 …

  const end = performance.now();
  durationsRef.current.push(end - start);

  if (durationsRef.current.length >= 10) {
    const sum = durationsRef.current.reduce((a, b) => a + b, 0);
    const avg = sum / durationsRef.current.length;
    console.log(`[perf] transform 평균: ${avg.toFixed(2)} ms (samples: 10)`);
    durationsRef.current = [];
  }
};

---

📝 측정 결과

테스트 조건	평균 처리 시간 (ms)	성 능 개 선
❌ 비최적화	3.49	기준
✅ batchDraw()만 적용	2.70	22.75% ↓
✅ useCallback+batchDraw()	1.71	51.06% ↓

• batchDraw만 적용: 3.49 → 2.70ms ⇒ 약 22.75% 감소

• useCallback 추가 시: 2.70 → 1.71ms ⇒ 약 32% 추가 개선

• 전체 최적화 효과: 3.49 → 1.71ms ⇒ 총 51.06% 성능 향상

---

📸 캡쳐 스냅샷

1) ❌ 비최적화 버전 (3.49ms 평균)

2) ✅ batchDraw()만 적용 (2.70ms 평균)

3) ✅ useCallback + batchDraw() 적용 (1.71ms 평균)

---

🎯 정리 및 결론

1. 불필요한 리렌더링 방지: useCallback으로 핸들러 메모이제이션 적용

2. 불필요한 redraw 최소화: batchDraw()로 최적화된 그리기 처리

3. 상태 변경 최소화: 매 이벤트마다 상태를 직접 변경하지 않고 필요한 순간에만 반영

📌 이 최적화를 통해 평균 처리 시간이 3.49ms → 1.71ms, 약 51% 감소
복잡한 캔버스 조작에서도 부드럽고 반응성 높은 UX 개선