🚀 컴포넌트 관심사 분리를 통한 렌더링 최적화
🚨 문제 상황
현재 마이페이지와 유저 페이지는 동일한 UI 컴포넌트인 UserProfile.tsx를 공유하고 있습니다.
각 페이지에서는 유저 정보 API와 유저 포스트 API를 각각 호출하여 상태를 관리하고 있습니다.
이렇게 최상위 컴포넌트에서 두 개의 API를 함께 관리한 이유는, 두 API 호출이 모두 완료되었는지를 확인하고, 이에 따라 로딩 컴포넌트를 관리하고,무한 스크롤을 관리하는데 쉽게하기 위해서였습니다.
이러한 구조는 처음에는 API 호출 타이밍을 제어하기에 효과적이었지만, 시간이 지나면서 변경되지 않은 컴포넌트까지 함께 렌더링되는 비효율이 발생했습니다. 마이페이지와 유저 페이지에서 유저, 유저 포스트의 상태를 모두 다루다 보니, 렌더 단계에서 불필요한 Virtual DOM 비교가 반복되며 리소스가 낭비되는 문제가 발생했습니다.
🛠️ 문제 해결
문제를 해결하기 위해 기존 유저 페이지와 마이페이지 컴포넌트를 삭제하고, 공통 UI 컴포넌트인 UserProfile.tsx에서 각 페이지에 맞게 유저 정보와 포스트 리스트 컴포넌트를 분기 처리했습니다.
App.tsx
마이페이지와 유저페이지는 공통 UI 컴포넌트인 UserProfile.tsx 을 공유하고, isMyPage 라는 props에 따라서 각각의 페이지를 구별했습니다.
또한 UserProfileInfo.tsx 컴포넌트를 통해서 마이페이지용 컴포넌트와 유저페이지용 컴포넌트를 분기처리했으며, 최종적으로 ProfileInfoView.tsx 라는 공통 UI를 사용하게 설계했습니다.
또한 Tanstack Query는 각 컴포넌트 내부에서 개별적으로 로딩 상태를 관리하지만, 마이페이지와 유저페이지처럼 여러 API를 동시에 사용하는 경우, 로딩 상태를 통합적으로 관리할 필요가 있었습니다. 이를 위해 커스텀 훅을 통해 두 API의 로딩 상태를 묶고, 최상위 UserProfile 컴포넌트에서 일괄적으로 로딩 UI를 제어하도록 구성했습니다.
✅ 결과
컴포넌트의 관심사를 분리하고, 역할에 따라 책임을 명확히 나눌 수 있었습니다. 유저 정보와 유저 포스트 리스트 컴포넌트를 각각의 역할에 맞게 분리하면서, 불필요한 비교 연산을 줄이고, 의도치 않은 재렌더링을 방지할 수 있었습니다.
물론, 일부 컴포넌트의 재렌더링을 줄인다고 해서 전체 애플리케이션의 성능이 눈에 띄게 향상되는 것은 아니지만, 불필요한 렌더링을 줄이고 코드 구조를 명확하게 정리함으로써 장기적으로 유지보수성과 확장성을 높이는 데 도움이 되었습니다.
또한, 두 API의 로딩 상태를 통합 관리함으로써 컴포넌트 내부 로직이 훨씬 간결해졌고, 반복되는 로딩 처리 코드 없이 일관된 방식으로 UI 상태를 제어할 수 있게 되어 코드의 재사용성과 가독성 또한 향상되었습니다.
출처
