[react] 라이브러리 없이 무한 슬라이드 쇼 구현하기

 

입맛대로 슬라이드 쇼를 구현하려다 3일간 쌩쇼한 끝에 얻어낸 코드를 자랑하러 왔다! 덕분에 리액트 공부에 아주 큰 도움이 되었는데, 코드 또한 내 입맛대로이므로 혹여 지저분하다고 느끼신다면 취향 차이다!! 농담입니다 피드백 환영합니다🤗🤗 + 여러 분들께서 작성해 주신 무한 슬라이드 쇼 글을 참고해 공부하고 정리했습니다

 

☝🏻 무한 슬라이드 쇼 원리

먼저 원리를 알아보자. 아래와 같이 슬라이드 쇼로 보여줄 이미지 4장을 가로로 이어 붙인 배열을 만들어 준다.

import bg1 from "../img/1.jpg";
import bg2 from "../img/2.jpg";
import bg3 from "../img/3.jpg";
import bg4 from "../img/4.jpg";

/* bg img Array */
const bgArr = [
  { img: bg1, key: 1 },
  { img: bg2, key: 2 },
  { img: bg3, key: 3 },
  { img: bg4, key: 4 },
];

 

이제 그 시절 TV볼펜처럼 위 배열을 돌려줄 것이다. 무한 슬라이드 쇼를 구현한다고 무한한 배열을 만들 순 없으니 눈속임을 사용하는 것이다! TV볼펜처럼 앞서 만든 이미지 배열을 돌돌 말아준다고 생각하면 쉽다.

완벽한 눈속임을 위해 위처럼 이미지 배열의 앞, 뒤에 각각 마지막 이미지, 첫 번째 이미지를 붙여줄 것이다. 슬라이드 전환 효과가 있으므로, 이 과정을 생략하면 안 된다! 이 친구를 슬라이드 배열로 부르자.

const BG_NUM = bgArr.length;
const beforeSlide = bgArr[BG_NUM - 1];
const afterSlide = bgArr[0];

let slideArr = [beforeSlide, ...bgArr, afterSlide]; // create slide array (last, origin(first,...,last) ,first) for infinite slide show
const SLIDE_NUM = slideArr.length;

TV볼펜으로 만들어주기 위한 html은 다음과 같이 작성했다.

const Background = styled.div`
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
`;

/* bg img slider */
const SlideBtn = styled.div`
  z-index: 100;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const ImgContainer = styled.div`
  display: flex;
  overflow: hidden;
`;

const ImgBox = styled.div`
  width: 100%;
  height: 100vh;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

return (
    <>
      <Background>
        <SlideBtn
          className="Left"
          onMouseEnter={stopAutoSlide}
          onMouseLeave={intervalHandler}
          onClick={() => slideHandler(-1)}
        >
          <FontAwesomeIcon icon={faChevronLeft} size="4x" />
        </SlideBtn>
        <ImgContainer
          ref={slideRef}
          style={{
            width: `${100 * SLIDE_NUM}vw`,
            transition: "all 500ms ease-in-out",
            transform: `translateX(${
              -1 * ((100 / slideArr.length) * slideIndex)
            }%)`,
          }}
        >
          {slideArr.map((item, index) => (
            <ImgBox key={index}>
              <img src={item.img} />
            </ImgBox>
          ))}
        </ImgContainer>
        <SlideBtn
          className="Right"
          onMouseEnter={stopAutoSlide}
          onMouseLeave={intervalHandler}
          onClick={() => slideHandler(+1)}
        >
          <FontAwesomeIcon icon={faChevronRight} size="4x" />
        </SlideBtn>
      </Background>
    </>);

 

그럼 이제 돌돌 말아보자!

오른쪽에서 왼쪽 방향으로 슬라이드가 넘어가고 있다면, 이미지 1-2-3-4 (슬라이드 배열[1]-[2]-[3]-[4]) 가 순서대로 화면에 나타날 것이다. 그리고 다시 이미지 1 (슬라이드 배열[5]) 이 화면에 보여진다. 이때 전환 효과를 삭제하고 빠르게 슬라이드 배열[1]로 순간이동한다. 슬라이드 배열[1] 또한 이미지 1 이므로 화면상으로는 아무 변화가 없는 것처럼 보일 것이다. 이제 다시 자연스럽게 오른쪽에서 왼쪽 방향으로 슬라이드가 진행될 수 있다. TV 볼펜이 된 것이다!!

반대방향 또한 마찬가지이다.

 

트랜지션 애니메이션이 500ms간 작동하므로 500ms의 딜레이를 주고 순간이동 시키며, 전환효과 삭제 후 복구 시기를 순간이동 이후로 고정해 주기 위해 효과 복구는 순간이동으로부터 100ms의 딜레이를 준다.

  const [slideIndex, setSlideIndex] = useState(1);
  const [slideInterval, setSlideInterval] = useState(6000); // slideInterval 6 secs

  const slideRef = useRef<HTMLDivElement>(null);
  
  
  useInterval(() => setSlideIndex((prev) => prev + 1), slideInterval); // auto slide show with slideInterval
  
/* InfiniteSlideHandler attachs last/first imgs with origin last/first imgs to make slide seem infinite */
  const InfiniteSlideHandler = (flytoIndex: number) => {
    setTimeout(() => {
      if (slideRef.current) {
        slideRef.current.style.transition = "";
      }
      setSlideIndex(flytoIndex);
      setTimeout(() => {
        if (slideRef.current) {
          slideRef.current.style.transition = "all 500ms ease-in-out";
        }
      }, 100);
    }, 500);
  };

  if (slideIndex === SLIDE_NUM - 1) {
    // if first img (slide array's last item) -> go to origin first img
    InfiniteSlideHandler(1);
  }

  if (slideIndex === 0) {
    // if last img (slide array's first item) -> go to origin last img
    InfiniteSlideHandler(BG_NUM);
  }
  
  const intervalHandler = () => {
    // when InfiniteSlideHandler works for first img (slide array's last item), control slideInterval to show transition animation normally
    if (slideIndex === SLIDE_NUM - 1) {
      setSlideInterval(500);
    } else {
      setSlideInterval(6000);
    }
  };

 

 

✌🏻 슬라이드 컨트롤 버튼

위 코드에 등장하는 useInterval 훅은 아래와 같다.

/* useInterval Hook */
interface IUseInterval {
  (callback: () => void, interval: number): void;
}

const useInterval: IUseInterval = (callback, interval) => {
  const savedCallback = useRef<(() => void) | null>(null);

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

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

기존의 훅 코드와 조금 다른 점은 interval !== 10000000라는 조건문이 추가되었다는 점이다!

그 이유는 바로 슬라이드 컨트롤러 버튼을 만들었기 때문이다.

 

슬라이드 컨트롤러 버튼은 임의로 좌우방향 조작이 가능한 버튼이다. 하얀색 화살표처럼 배치했다.

그럼 여기서 발생하는 문제!!

내가 버튼을 클릭해 임의로 다음 페이지로 넘어갔음에도 시간은 흐른다는 것이다.. 즉, 이미지 1로 자동 슬라이드 된 시점으로부터 6초가 측정되므로, 화살표 버튼을 이용해 5.9초 시기에 내가 이미지 3에 도달했다면 0.1초 만에 이미지 4로 슬라이드 된다는 거다!

그래서 위 조건문을 추가해, 슬라이드 컨트롤 버튼 상에 마우스가 올라가있는 동안은 setInterval이 동작하지 않게 만들어 자동 슬라이드를 멈추어주었다. 마우스가 버튼을 벗어나면 다시 6초 간격으로 자동 슬라이드가 시작된다.

  /* SlideHandler for buttons */
  const slideHandler = (direction: number) => {
    setSlideIndex((prev) => prev + direction);
  };

  /* stopAutoSlide when controlling slide with buttons */
  const stopAutoSlide = () => {
    setSlideInterval(10000000);
  };

 

 

위의 모든 내용을 정리하면 아래와 같다!

🤘🏻 전체 코드

import styled from "styled-components";
import bg1 from "../img/1.jpg";
import bg2 from "../img/2.jpg";
import bg3 from "../img/3.jpg";
import bg4 from "../img/4.jpg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faChevronLeft,
  faChevronRight,
} from "@fortawesome/free-solid-svg-icons";
import { useEffect, useRef, useState } from "react";

const Background = styled.div`
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .Left {
    top: 50%;
    left: 3%;
    transform: translate(-50%, -50%);
    color: rgba(235, 235, 235, 0.3);
    &:hover {
      color: rgba(235, 235, 235, 0.5);
    }
  }
  .Right {
    top: 50%;
    left: 97%;
    transform: translate(-50%, -50%);
    color: rgba(235, 235, 235, 0.3);
    &:hover {
      color: rgba(235, 235, 235, 0.5);
    }
  }
`;

/* bg img slider */
const SlideBtn = styled.div`
  z-index: 100;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const ImgContainer = styled.div`
  display: flex;
  overflow: hidden;
`;

const ImgBox = styled.div`
  width: 100%;
  height: 100vh;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

/* bg img Array */
const bgArr = [
  { img: bg1, key: 1 },
  { img: bg2, key: 2 },
  { img: bg3, key: 3 },
  { img: bg4, key: 4 },
];

/* useInterval Hook */
interface IUseInterval {
  (callback: () => void, interval: number): void;
}

const useInterval: IUseInterval = (callback, interval) => {
  const savedCallback = useRef<(() => void) | null>(null);

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

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

function Home() {
  const [slideIndex, setSlideIndex] = useState(1);
  const [slideInterval, setSlideInterval] = useState(6000); // slideInterval 6 secs

  const slideRef = useRef<HTMLDivElement>(null);

  const BG_NUM = bgArr.length;
  const beforeSlide = bgArr[BG_NUM - 1];
  const afterSlide = bgArr[0];

  let slideArr = [beforeSlide, ...bgArr, afterSlide]; // create slide array (last, origin(first,...,last) ,first) for infinite slide show
  const SLIDE_NUM = slideArr.length;

  useInterval(() => setSlideIndex((prev) => prev + 1), slideInterval); // auto slide show with slideInterval

  /* InfiniteSlideHandler attachs last/first imgs with origin last/first imgs to make slide seem infinite */
  const InfiniteSlideHandler = (flytoIndex: number) => {
    setTimeout(() => {
      if (slideRef.current) {
        slideRef.current.style.transition = "";
      }
      setSlideIndex(flytoIndex);
      setTimeout(() => {
        if (slideRef.current) {
          slideRef.current.style.transition = "all 500ms ease-in-out";
        }
      }, 100);
    }, 500);
  };

  if (slideIndex === SLIDE_NUM - 1) {
    // if first img (slide array's last item) -> go to origin first img
    InfiniteSlideHandler(1);
  }

  if (slideIndex === 0) {
    // if last img (slide array's first item) -> go to origin last img
    InfiniteSlideHandler(BG_NUM);
  }

  const intervalHandler = () => {
    // when InfiniteSlideHandler works for first img (slide array's last item), control slideInterval to show transition animation normally
    if (slideIndex === SLIDE_NUM - 1) {
      setSlideInterval(500);
    } else {
      setSlideInterval(6000);
    }
  };

  /* SlideHandler for buttons */
  const slideHandler = (direction: number) => {
    setSlideIndex((prev) => prev + direction);
  };

  /* stopAutoSlide when controlling slide with buttons */
  const stopAutoSlide = () => {
    setSlideInterval(10000000);
  };

  return (
    <>
      <Background>
        <SlideBtn
          className="Left"
          onMouseEnter={stopAutoSlide}
          onMouseLeave={intervalHandler}
          onClick={() => slideHandler(-1)}
        >
          <FontAwesomeIcon icon={faChevronLeft} size="4x" />
        </SlideBtn>
        <ImgContainer
          ref={slideRef}
          style={{
            width: `${100 * SLIDE_NUM}vw`,
            transition: "all 500ms ease-in-out",
            transform: `translateX(${
              -1 * ((100 / slideArr.length) * slideIndex)
            }%)`,
          }}
        >
          {slideArr.map((item, index) => (
            <ImgBox key={index}>
              <img src={item.img} />
            </ImgBox>
          ))}
        </ImgContainer>
        <SlideBtn
          className="Right"
          onMouseEnter={stopAutoSlide}
          onMouseLeave={intervalHandler}
          onClick={() => slideHandler(+1)}
        >
          <FontAwesomeIcon icon={faChevronRight} size="4x" />
        </SlideBtn>
      </Background>
    </>
  );
}

export default Home;