Skip to content

⚡ Bolt: [성능 개선] Recharts 컴포넌트 데이터 가공 로직 메모이제이션 (useMemo)#245

Open
seonghobae wants to merge 4 commits into
developmentalfrom
bolt-recharts-usememo-16283728779748730659
Open

⚡ Bolt: [성능 개선] Recharts 컴포넌트 데이터 가공 로직 메모이제이션 (useMemo)#245
seonghobae wants to merge 4 commits into
developmentalfrom
bolt-recharts-usememo-16283728779748730659

Conversation

@seonghobae

Copy link
Copy Markdown

💡 What (무엇을):
대시보드의 Recharts 차트 컴포넌트(session-timeline-chart.tsx, model-share-chart.tsx, ranked-bar-chart.tsx, skill-frequency-chart.tsx, daily-cache-reads-chart.tsx, daily-work-chart.tsx)에서 렌더링 시마다 발생하는 데이터 가공(map, filter, reduce 등) 로직을 useMemo 훅으로 감싸 메모이제이션을 적용했습니다.

🎯 Why (왜):
Recharts는 data prop으로 들어오는 객체의 참조가 변경될 때마다 불필요한 깊은 비교 및 재렌더링을 유발할 수 있습니다. 기존에는 렌더링마다 새로운 배열 객체가 생성되어 메인 스레드를 블로킹하고 성능 저하(특히 SessionTimelineChart의 경우 O(N*M) 연산이 매번 실행됨)를 유발할 수 있는 구조였습니다. useMemo를 통해 의존성 데이터가 바뀔 때만 연산하도록 최적화했습니다.

📊 Impact (영향):

  • 데이터 가공이 필요한 모든 주요 차트 컴포넌트의 불필요한 재렌더링을 차단합니다.
  • 복잡한 데이터가 존재하는 세션 타임라인 등의 환경에서 프론트엔드 메인 스레드 블로킹을 크게 줄여 CPU 사용량과 프레임 드롭을 방지합니다.

🔬 Measurement (측정):
React Profiler를 통해 차트 컴포넌트를 측정했을 때, 부모 컴포넌트의 리렌더링 시에도 차트 컴포넌트의 내부 데이터 가공 로직이 스킵되어 렌더링 시간(Render duration)이 크게 단축된 것을 확인할 수 있습니다.


PR created automatically by Jules for task 16283728779748730659 started by @seonghobae

Memoizes data transformation pipelines in Recharts components to prevent expensive layout calculations on every component re-render.
@google-labs-jules

Copy link
Copy Markdown

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant