refactor: 프로필 페이지 코드 리팩토링

[presentKey]

📝 개요

• 컴포넌트 및 비지니스 로직 관심사 분리
• 리렌더링 성능 개선

🚀 변경사항

TabMenu 컴포넌트 예시

useTabMenu 훅 내부에서 UI 로직과 데이터 fetch 로직이 함께 있었습니다. 이로 인해 컴포넌트가 복잡하고 불필요한 렌더링이 발생했습니다.

이 문제를 개선하기 위해 비즈니스 로직을 관심사에 따라 적절히 분산하고, 관련있는 컴포넌트 내부로 UI와 로직을 재배치했습니다.

개선 전	개선 후

---

Stat 컴포넌트 리렌더링 개선

↓ 개선 전 영상

Stat.mp4

↓ 개선 후 영상

Stat.mp4

---

프로필 페이지 리뷰 좋아요 토글 시, 리렌더링 개선

개선 전	개선 후

• 개선 전

  • render: 11.6ms
  • 변경이 발생하지 않은 모든 review card 리렌더링

• 개선 후

  • render: 2.5ms
  • 변경이 발생한 review card만 리렌더링

↓ 개선 전 영상

ContentList.mp4

↓ 개선 후 영상

ContentList.mp4

🔗 관련 이슈

#375

➕ 기타

[chanwukim]

프로필 페이지 리뷰 좋아요 토글 시, 리렌더링 개선 여기가 인상적이네요 👀 잘 참고해보고 배우겠습니다