문제 상황

• 이미지를 사용하고 있는 모든 페이지(메인 페이 및 모임 리스트 페이지 등)가 비정상적으로 느려짐
• 처음 로드할 때는 빠르지만, 다른 페이지 갔다가 다시 돌아오면 점점 느려짐
• 스크롤/Swiper 움직일 때 끊김 발생
• 이미지가 늦게 뜨고, 화면 전체가 심하게 버벅거림

문제 원인 및 분석 (아래 원인들이 중첩되며 성능 저하를 유발하고 있었음)

**1) 불필요한 재렌더링 과다 발생**
`fetchMemberCount()`가 **displayedGroups가 변경될 때마다 계속 호출됨**
그룹 아이템 20~30개면 → 한 페이지 로드마다 20~30번 API 호출
GroupCard/SwiperCard가 매 렌더마다 계속 다시 렌더링됨

**2) 이미지 로딩 방식 비효율**
모든 이미지가 즉시 로드 (lazy loading 미적용함)
썸네일 리사이즈 없이 원본 이미지(수 MB) 요청
화면에 보이지도 않는 이미지 요청도 다 때려넣음

**3) 그룹 리스트 필터/정렬에서 매번 새 배열 생성**
displayedGroups useMemo 없음
정렬/필터 변경 시 전체 컴포넌트 리렌더

문제 해결한 작업 정리

1) 멤버 카운트 최초 1회만 fetch

useEffect(() => {
  displayedGroups.forEach(group => {
    fetchMemberCount(group.group_id);
  });
}, []);

• dependency[ ] 제거 → 최초 1회 호출만 실행
• 불필요한 API 요청 70~90% 감소함

2) LazyImage 도입

• IntersectionObserver 기반으로, 화면에서 보일 때만 이미지 로드
• loading="lazy", decoding="async" 추가
• placeholder → blur 효과로 단계적 로딩

초기 렌더링 가벼워짐