[Swiper] 데이터 렌더링 최적화 시도

🔍 요청 사항

랜딩 페이지에서 데이터를 불러오는 과정 중, Swiper를 사용하는 영역의 렌더링 시점이 달라 autoplay 인터랙션에 차이가 발생했습니다.
이에 따라 "인터랙션 차이를 없애달라"는 요청이 있었습니다.

 

📌 기존 코드 구조 (예시)

function Main() {
  const { data } = useGetSectionList();

  return (
    <Root>
      <TopBanner />
      <Enterprise />
      <Ticket />
      <LiveTour />
      <CenterSection />
      <Channel />
      <Category />
      ...
    </Root>
  );
}

🛠 시도한 최적화 방법

1. 데이터 호출 위치 변경
   • 각 컴포넌트 내부가 아니라 부모(Main 컴포넌트)에서 한 번에 호출하도록 변경
2. useQueries 사용
   • 병렬 요청을 위해 useQueries로 변경해보았으나, 렌더링 타이밍은 동일
3. props로 데이터 전달
   • 자식 컴포넌트로 데이터를 props로 전달하는 방식으로 변경 → 결과 동일

🧩 결론

Swiper는 자체적으로 autoplay 타이머를 가지고 있어, 렌더링 시점에 따라 차이가 발생할 수밖에 없어 보입니다.
렌더링 타이밍 이슈만으로는 완전히 해결하기 어려운 구조입니다.