[React] 이미지 자동 슬라이더 carousel 기능 구현하기

첫 화면에 배너 이미지가 자동으로 슬라이드 되고, 버튼 클릭으로도 사진 전환이 가능한 컴포넌트를 만들어야하는 과제가 주어졌다.

다양한 라이브러리가 있지만 나는 최대한 JS 코드만을 이용해서 만들어보았다!

1. 현재 보여지는 사진과 순서에 대한 Value 값 지정하기

UseState를 활용해서 사진 순서에 따라 값이 바뀌게 하였다.

  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  
  const images = [HeroBanner1, HeroBanner2, HeroBanner3, HeroBanner2];

2. useEffect와 setInterval() 함수를 통해 자동 전환 구현하기

setInterval()함수를 통해 currentImageIndex 값이 3초에 한 번씩 + 1씩 더해지고 만약 이미지 배열의 길이와 같아질 경우 처음으로 돌아가기로 설정해놨다.

setInterval() 함수가 익숙하지 않는 분들이 위해 적어둔다 ㅎㅎ!

setInterval(callback, delay, ...args);

callback: 실행할 함수 또는 실행할 코드 블록입니다. 지정된 delay 간격마다 호출됩니다.
delay: 함수가 호출되는 시간 간격(밀리초 단위)입니다.
...args (선택적): 콜백 함수에 전달할 인수들입니다.

setInterval() 함수를 호출하면 일정 시간 간격으로 콜백 함수가 반복적으로 호출됩니다. 
이러한 반복은 clearInterval() 함수를 사용하여 중지시킬 수 있습니다.

useEffect(() => {
  // 3초마다 이미지 인덱스를 업데이트하는 인터벌을 생성
  const interval = setInterval(() => {
    setCurrentImageIndex(prevIndex =>
      prevIndex === images.length - 1 ? 0 : prevIndex + 1
    );
  }, 3000);

  // 컴포넌트가 언마운트되거나 업데이트되기 직전에 호출되는 클린업 함수를 반환
  // 이 함수에서는 인터벌을 클리어하여 중지
  return () => {
    clearInterval(interval);
  };
}, [images.length]);

3. 스타일 컴포넌트를 통해 출력하기

이미지 배열을 src 안에 설정해두어 아래와 같이 출력하였다.

          <CarouselImage src={images[currentImageIndex]} alt="Carousel" />

4. 뒤로가기.,앞으로 가기 버튼 구현하기

위에 설정해두었던 setCurrentImageIndex()를 활용하여 image[] 배열을 제어한다.

버튼은 디자인에 맞게 제작하여 아래 코드 기능을 넣으면 된다.

  const goToPreviousImage = () => {
    setCurrentImageIndex(prevIndex =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

  const goToNextImage = () => {
    setCurrentImageIndex(prevIndex =>
      prevIndex === images.length - 1 ? 0 : prevIndex + 1
    );
  };