Example

What I did.

스와이프 전환 애니메이션 개선

초기에는 스와이프 전환 시 부자연스러운 화면 전환이 발생했습니다. 이를 해결하기 위해 Swiper의 onSetTranslate 이벤트를 활용하여 스와이프 방향과 거리에 따라 동적으로 opacity를 조절하는 로직을 구현했습니다. 드래그 방향에 따라 다른 opacity 계산 로직을 적용하여 자연스러운 전환 효과를 구현했습니다.

* 예시 코드입니다.

<Swiper
  direction={"vertical"}
  className="mySwiper"
  onSlideChange={handleSlideChange}
  onTransitionEnd={() => {
    setOpacity(1);
  }}
  onSetTranslate={(swiper, translate) => {
    const opacity = (translate + swiper.height * curIndex) / -swiper.height;

    // 첫렌더시 1로 셋팅
    if (opacity === -0) {
      setOpacity(1);
      return;
    }

    // 드래그 방향에 따른 opacity 조절
    if (swiper.touches.diff < 0) {
      setOpacity(1 - opacity * 2);
    } else {
      setOpacity(-opacity);
    }

}}

렌더링 최적화

모든 뉴스 아이템을 한꺼번에 렌더링하여 대량의 데이터를 로드할 때 발생하는 성능 저하 문제를 해결하기 위해 isOutOfRange 함수를 구현하여 현재 보고 있는 아이템 주변의 일정 범위(RENDER_RANGE = 15)만 렌더링하는 작업을 진행했습니다.

* 예시 코드입니다.

const isIndexWithinRange = (curIndex, targetIndex, range) => {
  const lowerBound = curIndex - range;
  const upperBound = curIndex + range;
  return lowerBound < targetIndex && upperBound > targetIndex;
};

const isOutOfRange = (curIndex, targetIndex, range) => {
  return curIndex > 21 && !isIndexWithinRange(curIndex, targetIndex, range);
};

// 조건부 렌더링
{
  shortsData.map((newsInfo, index) =>
    isOutOfRange(curIndex, index, RENDER_RANGE) ? (
      <SwiperSlide key={index} />
    ) : (
      <SwiperSlide key={index}>
        {({ isActive }) => (
          <News
            index={index}
            curIndex={curIndex}
            newsInfo={newsInfo}
            // 추가 props...
          />
        )}
      </SwiperSlide>
    )
  );
}