⚡ Bolt: [성능 개선] 대시보드 차트 데이터 useMemo 적용#247
Conversation
- 대시보드의 Recharts 차트 컴포넌트들에 전달되는 `chartData` 배열을 `useMemo`로 래핑하여 불필요한 재계산 및 렌더링 방지 - 영향을 받는 차트: DailyWorkChart, DailyCacheReadsChart, ModelShareChart, RankedBarChart, SkillFrequencyChart - 관련하여 Recharts 성능 개선 러닝을 .jules/bolt.md 에 기록
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What: 대시보드의 주요 Recharts 차트 컴포넌트 5개(
daily-work-chart,daily-cache-reads-chart,model-share-chart,ranked-bar-chart,skill-frequency-chart)에 전달되는chartData데이터 생성 부분을useMemo훅을 사용하도록 최적화했습니다. 추가로, React Hook의 조건부 호출 규칙을 준수하기 위해model-share-chart에서 early return이 hook보다 뒤에 위치하도록 수정했습니다.🎯 Why: Recharts 컴포넌트들은 내부적으로 SVG/Canvas 렌더링을 수행하므로 리렌더링 비용이 큽니다. React 렌더링 사이클마다 새로운 배열 참조(예:
data.map())를 전달하면 Recharts 컴포넌트 전체가 불필요하게 다시 그려지는(re-render) 현상이 발생합니다. 이를 메모이제이션하여 렌더링 성능을 확보하기 위함입니다.📊 Impact: 부모 컴포넌트 리렌더링 시에도 차트 데이터 참조가 동일하게 유지되므로, 해당 차트 컴포넌트들의 불필요한 깊은 리렌더링(deep re-renders)을 획기적으로 방지합니다.
🔬 Measurement: React DevTools의 Profiler 탭을 통해 부모 상태 변경 시 차트 컴포넌트의 렌더링이 발생하지 않는지 확인하거나, 성능 측정 시 차트 리렌더링 비용이 줄어든 것을 확인할 수 있습니다.
PR created automatically by Jules for task 10585046211089018951 started by @seonghobae