D3 그래프의 불필요한 리렌더링 및 노드 스타일링 오류 해결

[SangHyun01]

PR 요약

본 PR은 D3 그래프 컴포넌트에서 발견된 두 가지 주요 문제를 해결합니다.

1. 불필요한 리렌더링으로 인해 발생하던 성능 저하(깜빡임 현상) 문제를 해결했습니다.
2. 노드 클릭 시 색상이 테두리와 겹쳐 보이던 시각적 버그를 수정했습니다.

이를 통해 컴포넌트의 성능과 사용자 경험(UX)을 개선하고자 합니다.

---

주요 변경 사항

1. useMemo와 useCallback을 이용한 렌더링 성능 최적화

• 문제점 (AS-IS)

  • useQuestionTree 훅이 리렌더링될 때마다 새로운 함수(onNodeClick 등)와 객체(viewData 등) 참조를 생성했습니다.
  • 이로 인해 props로 이 값들을 받는 InteractiveD3Graph 컴포넌트가 내용 변경이 없음에도 불구하고 불필요하게 전체를 다시 그리는 현상이 발생하여, 그래프가 깜빡이는 것처럼 보였습니다.

• 해결책 (TO-BE)

  • 핵심 로직이 담긴 useQuestionTree 훅 내부에 useCallback과 useMemo를 적용하여, 반환되는 함수와 값들의 참조 안정성을 보장했습니다.
  • 이제 props가 실제로 변경될 때만 그래프가 업데이트되도록 하여, 불필요한 렌더링과 깜빡임 현상을 완전히 해결했습니다.

2. 노드 클릭 시 스타일링 로직 개선

• 문제점 (AS-IS)

  • 노드를 클릭했을 때, 기존의 계층별 fill(채우기) 색상은 그대로 둔 채, 두꺼운 파란색 stroke(테두리)만 추가로 적용했습니다.
  • 이 때문에 두 색상이 겹쳐 보여 사용자에게 혼란을 주는 시각적 버그가 있었습니다.

• 해결책 (TO-BE)

  • 스타일링 로직을 currentPath라는 단일 상태에만 의존하도록 통합했습니다.
  • 클릭 이벤트는 직접 스타일을 변경하는 대신 currentPath 상태만 변경시키는 트리거 역할을 합니다.
  • D3 렌더링 로직은 이 currentPath를 기반으로 '현재 활성화된 노드'와 '경로상의 노드', '일반 노드'를 명확히 구분하여 fill 색상을 일관되게 적용하도록 수정했습니다.
  • 이를 통해 노드 클릭 시 테두리가 아닌 채우기 색이 명확하게 파란색으로 변경되어, 사용자에게 더 직관적인 시각적 피드백을 제공합니다.

---

관련 이슈

• Closes [feature]그래프 렌더링 이슈 #21