[new feature]: Refactor: AuthorBarChart 컴포넌트의 D3 렌더링 성능 최적화

[ojspp41]

관련 이슈

No response

기능 설명

---

## 제목: Refactor: AuthorBarChart 컴포넌트의 D3 렌더링 성능 최적화

문제점 (Current Behavior)

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx 컴포넌트는 현재 useEffect 훅의 의존성(dependency)이 변경될 때마다 svg.selectAll("*").remove()를 호출하여 차트 전체를 지우고 처음부터 다시 렌더링합니다.

이 방식은 구현이 간단하지만, 다음과 같은 비효율을 야기합니다.

• 성능 저하: 데이터가 많거나 상태 변경이 잦을 경우 불필요한 DOM 조작으로 인해 성능이 저하됩니다.
• 사용자 경험 저하: 차트가 갱신될 때마다 깜빡이는 현상이 발생하여 부드러운 시각적 경험을 해칩니다.

개선 방안 (Proposed Solution)

D3.js의 General Update Pattern (.join() 또는 enter, update, exit selection)을 적극적으로 활용하여, 변경이 필요한 부분만 선택적으로 업데이트하도록 리팩토링합니다.

1. 초기 설정 분리:

   • SVG 캔버스 생성, 축(Axis) 그룹 추가 등 한 번만 실행되면 되는 초기 설정 로직을 useEffect 훅으로 분리합니다. (의존성 배열: [])

2. 데이터 업데이트 로직 개선:

   • 데이터가 변경될 때마다 막대(bar)의 높이, 위치, 색상 등 데이터에 종속적인 속성만 D3의 .join() 메서드와 .transition()을 사용해 부드럽게 변경합니다.
   • svg.selectAll("*").remove() 코드를 제거하여 불필요한 전체 삭제 및 재성성을 방지합니다.

기대 효과 (Expected Benefits)

• DOM 조작을 최소화하여 컴포넌트의 렌더링 성능을 향상시킵니다.
• 필터링 또는 메트릭 변경 시, 차트가 깜빡임 없이 부드러운 트랜지션으로 갱신되어 사용자 경험이 향상됩니다.
• 더 D3.js 친화적인 모범 사례를 적용하여 코드의 유지보수성을 높입니다.

---

기능 목록

No response

참고

No response

[ytaek]

오우 transition 쓸 수 있도록 되면 정말 좋을 것 같습니다!

[chae-dahee]

#834 이슈로 전달해서 작업했습니다.
#893 이슈에서 성능최적화 사항 논의했습니다
#954 에서 작업이 되었습니다.
close 합니다!