[React-native] Swiper를 이용해서 배너 광고처럼 만드는 간단한 방법

안녕하세요. 해, 커리어 대회로 학기 중에 바빠서 정리할 겨를이 없었는데 방학 했으니 다시 꾸준히 업로드 해볼게요. (370팀 중에 4팀 안에 들어서 tvn D 촬영도 하고 온건 안 비밀.. 물론 4등 한건 비밀..)

웹이나 앱 메인 상단에 있는 배너 광고를 보신 적이 있나요?

진입하자마자 옆으로 슬라이드 되면서 넘어가고 그 뒤로 천천히 슬라이드 되는 그런 것 말이에요.

오늘은 Swiper 라이브러리를 이용해서 처음에는 바로 넘어가고 그 이후로 천천히 넘어가는 배너 광고를 만들어 보겠습니다.

저희는 react-native-swiper를 이용할 예정입니다.

우선 설치합니다.

npm i react-native-swiper

Properties

많은 properties가 존재하니 자세한 내용은 깃을 참고 해주시고, 지금은 우리가 이용할 것들 위주로 알아보겠습니다.
https://github.com/leecade/react-native-swiper

• loop: 자식으로 내려주는 컴포넌트가 끝에 도달했을 때, 처음으로 다시 loop할지를 관여합니다. default가 true이기 때문에 끝에 도달해서 멈추려면 false 값을 주어야 합니다.
• autoplay: 자동으로 컴포넌트들이 슬라이드가 가능하게 합니다. default가 false이기 때문에 배너 광고의 효과를 내기 위해서는 true를 주어야 합니다.
• width, height: 설정을 해주지 않는다면 { flex: 1 } 값을 갖게 되어 화면을 꽉 채우니 본인의 배너 광고의 크기에 맞게 설정 해주세요.
• showsPagination: 페이징 처리를 보여주는 역할을 합니다. default가 true이기 때문에 없애실 분들은 false값을 설정하시면 됩니다.
• autoplayTimeout: 자동으로 슬라이드 되는 시간 간격을 의미합니다. default값은 2.5로 2.5초 간격마다 슬라이드 되는 것을 의미합니다.

구현

저는 디자인적으로 깔끔하게 하기 위해, 페이징을 없애고 광고가 여러개 있음을 보여주기 위해서 처음 앱에 진입하면 금방 넘어가고 그 뒤로 천천히 넘어가는 Swiper를 만들고자 합니다.

중요한 것은 autoplayTimeout으로 넘겨줘야 할 시간인데, 처음 시간만 짧게 설정하고 그 이후로는 길게 설정해주면 된답니다. setTimeout을 통해서요!!

처음 슬라이딩이 되는 시간 이후에 setTimeout을 통해 시간을 새롭게 초기화 해주면 해결됩니다.
setTimeout의 경우, milliseconds를 활용하기 때문에 1sec=1000msec 임을 유의해주세요.

import React, { useState, useEffect } from 'react';
import Swiper from 'react-native-swiper';
import BannerSection from '.';

export default function Banner() {
  const [slideTime, setSlideTime] = useState(1); // 초기 슬라이딩 시간 1초
  const bannerLists = [{...}] // 배너 리스트
  useEffect(() => {
    const autoTimer = setTimeout(() => setSlideTime(8), 1000); // 1초 후에 slideTime을 8초로 바꾸고
    return () => clearTimeout(autoTimer);
  }, [])
  
  return (
    <>
      <Swiper 
        autoplay 
        showsPagination={false} 
        width={300}
        height={250} 
        autoplayTimeout={time}
      >
        {bannerLists.map((banner) => {
          return (
            <BannerSection key={banner.id} data={banner}/>
          )}
        )}
      </Swiper>
    </>
  )
}

이렇게 간단하게 구현할 수 있습니다!