[React] Slick 슬라이더를 사용하여 프로그래스바 구현하기

위코드 2차 프로젝트로 네이버 Expert 사이트 클론 중에 메인화면의 배너 슬라이더 구현 내용 정리하고자 합니다.

구현 영상

기능 요구사항

• 배너이미지가 무한으로 슬라이더 되며, 슬라이드 될 때 마다 배경 색상과 문구, 링크가 변경되어야 한다.
• 슬라이더는 4초마다 자동 재생되며, 진행 시간을 프로그래스바로 표시되어진다.
• 자동재생을 일시멈춤, 재생 제어가 가능하다.
• 이전, 다음 슬라이더로 이동 가능하다.

상세설명

1) 배너 정보 관리

const BANNERS = [
  {
    no: 1,
    image:
      'https://ssl.pstatic.net/static/kin/09renewal/promotion/mobile/expert_promotion_banner_4_mobile20210615155941.jpg?ver=20210615035942',
    title: '엑스퍼트 X KOTRA\n실시간 전문가\n상담 사업 신청 안내',
    color: '#064689',
    link: 'https://m.expert.naver.com/mobile/events/21024454906',
  },
  {
    no: 2,
    image:
      'https://ssl.pstatic.net/static/kin/09renewal/promotion/mobile/expert_promotion_banner_4_mobile20210526165312.jpg?ver=20210526045312',
    title: '영어공부를\n다시 시작한다면\n1:1 맞춤클래스',
    color: '#035ac6',
    link: '',
  },
  {
    no: 3,
    image:
      'https://ssl.pstatic.net/static/kin/09renewal/promotion/mobile/expert_promotion_banner_4_mobile20210527100646.jpg?ver=20210527100646',
    title: '무료한 일상\n솜씨당과 함께하는\n즐거운 취미 생활',
    color: '#cc6a71',
    link: '',
  },
  {
    no: 4,
    image:
      'https://ssl.pstatic.net/static/kin/09renewal/promotion/mobile/expert_promotion_banner_4_mobile20210415171414.jpg?ver=20210415051415',
    title: '요즘 핫한\n클래스만 모았어!\n90%할인 중',
    color: '#4c7d19',
    link: 'https://campaign.naver.com/eXpertTOPclass/?utm_source=naver&utm_medium=banner&utm_campaign=eXpertTOPclass_general&utm_content=experthome_general-hot_210415',
  },
];

2) Slick 슬라이더

// import
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
...

  // ref 추가 
  const slider = useRef();
...

  // slick 설정 
  const settings = {
    dots: true,
    infinite: true,
    speed: 500, 
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
  };
...
              // JSX 추가
              <Slider ref={slider} {...settings}>
                {BANNERS?.map((banner, i) => {
                  return (
                    <SwiperSlide key={i}>
                      <Link to={banner.link}>
                        <img alt={banner.title} src={banner.image} />
                      </Link>
                    </SwiperSlide>
                  );
                })}
              </Slider>

• 설치
• function 컴포넌트에서 ref 사용하여 slick 연결하기

3) useInterval 추가

// /src/Hooks/useHook.js
import { useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

export default useInterval;

• 함수형 컴포넌트에서 setInterval이 의도하지 않는 동작을 하여 useInterval이라는 커스텀 훅을 만들어 사용합니다.

3) 프로그래스바

  const [progressWidth, setProgressWidth] = useState(0);

...

  useInterval(
    () => {
      if (progressWidth >= 100) {
        setProgressWidth(0);
        next();
      } else {
        setProgressWidth(progressWidth + 1 / (0.1 + 4));
      }
    },
    isRunning ? 10 : null
  );

4) 이전, 다음

  // Next 슬라이드 Event
  const next = () => {
    setSlideIndex(slideIndex + 1 >= BANNERS.length ? 0 : slideIndex + 1);
    setProgressWidth(0);
    slider.current.slickNext();
  };

  // Prev 슬라이드 Event
  const previous = () => {
    setSlideIndex(slideIndex === 0 ? BANNERS.length - 1 : slideIndex - 1);
    setProgressWidth(0);
    slider.current.slickPrev();
  };

5) 일시멈춤, 다시시작

  const [isRunning, setIsRunning] = useState(true);

              <PlayControlArea
                onClick={() => {
                  setIsRunning(!isRunning);
                }}
              >
                {isRunning ? (
                  <i className="fas fa-pause"></i>
                ) : (
                  <i className="fas fa-play"></i>
                )}
              </PlayControlArea>