Custom Hook을 활용한 캐러셀 구현

06 Nov 2023

customhook

캐러셀(carousel)은 웹 페이지나 앱에서 이미지나 콘텐츠를 일정한 간격으로 순환적으로 보여주는 UI 요소입니다. 이번 기사에서는 React의 Custom Hook을 활용하여 캐러셀을 구현하는 방법에 대해 알아보겠습니다.

1. Custom Hook 생성

먼저, useCarousel이라는 custom hook을 생성합니다. 이 hook은 캐러셀의 상태와 제어를 관리하는 역할을 합니다. 다음은 useCarousel hook의 구현 예시입니다.

import { useState, useEffect } from 'react';

const useCarousel = (images, interval = 3000) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      setCurrentIndex(prevIndex =>
        prevIndex === images.length - 1 ? 0 : prevIndex + 1
      );
    }, interval);

    return () => {
      clearInterval(timerId);
    };
  }, [images, interval]);

  return currentIndex;
};

export default useCarousel;

위의 코드에서 useCarousel hook은 images와 interval 파라미터를 받아 현재 인덱스를 관리하고, 일정한 간격으로 인덱스를 변경하는 기능을 제공합니다.

2. 캐러셀 구현

이제, useCarousel hook을 활용하여 실제로 캐러셀을 구현해보겠습니다. 아래는 간단한 캐러셀 예시입니다.

import React from 'react';
import useCarousel from './useCarousel';

const Carousel = ({ images }) => {
  const currentIndex = useCarousel(images);

  return (
    <div>
      <img src={images[currentIndex]} alt="carousel image" />
    </div>
  );
};

export default Carousel;

위의 예시 코드에서 Carousel 컴포넌트는 images prop을 받아 useCarousel hook을 사용하여 현재 인덱스를 가져옵니다. 그리고 현재 인덱스에 해당하는 이미지를 화면에 보여주는 역할을 합니다.

3. 사용 예시

마지막으로, Carousel 컴포넌트를 사용하는 예시 코드를 살펴보겠습니다.

import React from 'react';
import Carousel from './Carousel';

const App = () => {
  const images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
  ];

  return (
    <div>
      <h1>캐러셀 예시</h1>
      <Carousel images={images} />
    </div>
  );
};

export default App;

위의 예시 코드에서 App 컴포넌트는 Carousel 컴포넌트를 렌더링하고 images prop에 이미지 URL 배열을 전달합니다.

이제, 위의 예시 코드를 실행하면 캐러셀이 작동하는 화면이 나타납니다. 이미지는 일정한 간격으로 순환적으로 보여지게 됩니다.

마무리

이번 기사에서는 React의 Custom Hook을 활용하여 캐러셀을 구현하는 방법에 대해 알아보았습니다. Custom Hook은 기존의 로직을 재사용하고 컴포넌트 코드를 간결하게 유지할 수 있는 좋은 방법입니다. 이를 통해 웹 개발에서 캐러셀 구현에 대한 번거로움을 줄일 수 있습니다.