[react] 단순 자동 슬라이드 코드 정리

import { useState, useEffect } from 'react';

function AutoSlide({ images, intervalTime }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentIndex((currentIndex + 1) % images.length);
    }, intervalTime);

    return () => clearInterval(intervalId);
  }, [currentIndex, images.length, intervalTime]);

  return (
    <div>
      <img src={images[currentIndex]} alt={`slide${currentIndex}`} />
    </div>
  );
}

 

위 코드에 대해 설명하자면, useState와 useEffect 훅을 사용하여 상태를 관리합니다. currentIndex 상태는 현재 슬라이드의 인덱스를 나타내며, setCurrentIndex 함수를 통해 갱신 됩니다.

 

useEffect 훅을 사용하여 setInterval 함수를 호출하고, intervalTime마다 setCurrentIndex 함수를 호출하여 다음 슬라이드의 인덱스를 설정합니다. 이때 currentIndex가 마지막 슬라이드에 도달하면 첫 번째 슬라이드로 돌아가도록 % 연산자를 사용합니다. 예를 들어 마지막 슬라이드를 나타내는 인덱스가 3 이라면 3 % 3 이 되는 순간 인덱스는 0으로 돌아갑니다.

 

마지막으로 return 구문에서는 currentIndex에 해당하는 이미지를 화면에 출력합니다. 이때 alt 속성은 해당 이미지의 구분을 위해 슬라이드의 순서에 따라 slide0, slide1, ...와 같이 설정합니다.

 

이렇게 구현된 AutoSlide 컴포넌트를 사용하려면, images와 intervalTime을 props로 전달해주면 됩니다. images는 슬라이드 이미지의 경로를 담은 배열이며, intervalTime은 슬라이드가 자동으로 넘어가는 시간 간격을 나타냅니다. 예를 들어, 아래와 같이 사용할 수 있습니다.

 

function App() {
  const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
  const intervalTime = 3000; // 3초

  return (
    <div>
      <AutoSlide images={images} intervalTime={intervalTime} />
    </div>
  );
}

 

이렇게 되면 3초 마다 intervalTime 함수 내의 state 함수가 실행되면서 무한 슬라이드가 구현됩니다.