Custom Hook을 사용한 이미지 슬라이더 구현

06 Nov 2023

customhook

이미지 슬라이더는 웹 개발에서 자주 사용되는 요소 중 하나입니다. 사용자는 다양한 이미지를 순차적으로 보여주고 싶을 때 이를 구현할 수 있습니다. 이제 우리는 Custom Hook을 사용하여 간단한 이미지 슬라이더를 만들어보겠습니다.

useState를 이용한 기본 슬라이더 구현

먼저, 슬라이더의 기본적인 동작을 구현해보겠습니다. 이를 위해 React의 useState 훅을 사용합니다. 다음은 슬라이더 컴포넌트의 기본 구조입니다.

import React, { useState } from "react";

const ImageSlider = ({ images }) => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const handleNext = () => {
    const nextIndex = (currentImageIndex + 1) % images.length;
    setCurrentImageIndex(nextIndex);
  };

  const handlePrev = () => {
    const prevIndex = (currentImageIndex - 1 + images.length) % images.length;
    setCurrentImageIndex(prevIndex);
  };

  return (
    <div>
      <button onClick={handlePrev}>&lt;</button>
      <img src={images[currentImageIndex]} alt="slider" />
      <button onClick={handleNext}>&gt;</button>
    </div>
  );
};

export default ImageSlider;

useState 훅을 사용하여 currentImageIndex라는 상태값을 만들었습니다. 이 값은 현재 보여지고 있는 이미지의 인덱스를 나타냅니다. handleNext와 handlePrev 함수에서는 인덱스를 업데이트하여 다음 혹은 이전 이미지를 보여줄 수 있도록 구현했습니다.

Custom Hook 구현하기

이제 Custom Hook을 사용하여 슬라이더를 좀 더 유연하게 만들어보겠습니다. useImageSlider라는 Custom Hook을 만들어 이미지 슬라이더에 필요한 상태값과 함수를 반환하도록 구현합니다.

import React, { useState } from "react";

const useImageSlider = (images) => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const handleNext = () => {
    const nextIndex = (currentImageIndex + 1) % images.length;
    setCurrentImageIndex(nextIndex);
  };

  const handlePrev = () => {
    const prevIndex = (currentImageIndex - 1 + images.length) % images.length;
    setCurrentImageIndex(prevIndex);
  };

  return {
    currentImageIndex,
    handleNext,
    handlePrev,
  };
};

export default useImageSlider;

useImageSlider 훅은 currentImageIndex, handleNext, handlePrev 세 가지 값을 반환합니다. 이렇게 함으로써 다른 컴포넌트에서도 이 Custom Hook을 사용하여 이미지 슬라이더를 구현할 수 있습니다.

슬라이더 사용하기

이제 ImageSlider 컴포넌트를 사용하여 실제로 슬라이더를 구현해보겠습니다. 이미지 슬라이더에 사용할 이미지들의 배열을 생성하고, useImageSlider 훅을 사용하여 필요한 상태값과 함수들을 가져옵니다.

import React from "react";
import useImageSlider from "./useImageSlider";

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

  const { currentImageIndex, handleNext, handlePrev } = useImageSlider(images);

  return (
    <div>
      <button onClick={handlePrev}>&lt;</button>
      <img src={images[currentImageIndex]} alt="slider" />
      <button onClick={handleNext}>&gt;</button>
    </div>
  );
};

export default App;

컴포넌트에서 useImageSlider 훅을 호출하여 반환된 상태값과 함수들을 사용하여 슬라이더를 구현합니다. 이제 이미지 슬라이더를 렌더링하고 사용할 준비가 되었습니다!

마무리

Custom Hook을 사용하면 같은 기능을 하는 로직을 여러 컴포넌트에서 재사용할 수 있으며, 코드를 더 간결하게 유지할 수 있습니다. 이미지 슬라이더를 구현하는 예시를 통해 Custom Hook의 사용법을 익히고, 필요한 경우에 이를 활용하여 보다 유연하고 재사용 가능한 코드를 작성할 수 있습니다.

댓글 내용:

이미지 슬라이더 구현 예시