React-Swiper로 기존 Slider 성능 개선하기

AuctionWini Seller 사이트의 메인 페이지에서 사용된 Slider는 데이터를 map 함수로 반복 처리하여 1px씩 동적으로 계속 움직이는 방식으로 구현되어 있었습니다. 이러한 방식으로 구현된 Slider는 초기 로드 시 많은 자원을 소모하여 페이지 로딩 시간이 길어졌습니다. 이로 인해 사용자 경험이 저하되었고, Google Lighthouse 평가에서도 성능 점수가 낮게 나오는 문제가 발생했습니다.

이 문제를 해결하기 위해 React-Swiper를 도입하여 Slider 문제를 개선했습니다.

React-Swiper로 교체 전

그림 1. React-Swiper로 교체 전

React-Swiper로 교체 후

그림 2. React-Swiper로 교체 후

React-Swiper Code

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32      {5 < data.length ? (
        <SwiperContainer
          slidesPerView="auto"
          loop
          autoplay={{
            delay: 0,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          }}
          speed={4000}
          navigation={true}
          modules={[Autoplay]}
          className="swiper-container"
        >
          {data.map((carInfo) => {
            return (
              <SwiperSlide key={carInfo.N_ROWNUM}>
                <MemoizeSlide
                  key={nextId()}
                  carName={carInfo.V_CARNM}
                  imgPath={carInfo.V_IMG_FULL_PATH}
                />
              </SwiperSlide>
            );
          })}
        </SwiperContainer>
      ) : (
        <NoDataBlock>
          <img src={noDataImage} alt="no data" />
          <p> 옥션위니 전문팀이 차량을 검수중입니다.</p>
        </NoDataBlock>
      )}

여기서 추가적으로 Silde가 물처럼 흐르시길 바라신다면 swiper를 감싸고 입는 wrapper요소에 아래의 Css를 적용하시면 됩니다.

1
2
3
4.swiper-wrapper {
    display: flex;
    transition-timing-function: linear;
 }

React-Swiper로 기존 Slider 성능 개선하기

실무 경험의 다른 글