React에서 Carousel 컴포넌트 만들기

 

React로 Carousel(캐러셀) 컴포넌트를 구현하는 방법을 알아보겠습니다. 캐러셀은 슬라이더 형식으로 이미지를 순환하거나 콘텐츠를 표시하는 UI 컴포넌트입니다. 이 글에서는 기본적인 캐러셀 구현부터 고급 기능 추가까지 다뤄보겠습니다.

---

1. 캐러셀 컴포넌트란?

캐러셀 컴포넌트는 여러 개의 아이템(예: 이미지, 텍스트 등)을 가로로 나열하고, 사용자 인터랙션(예: 버튼 클릭, 드래그, 자동 재생 등)을 통해 아이템을 순환할 수 있는 UI 요소입니다.

주요 특징:

1. 인터랙티브한 콘텐츠: 사용자와의 상호작용을 통해 콘텐츠를 탐색할 수 있습니다.
2. 제한된 공간에서 다수의 콘텐츠 표시: 화면 공간을 절약하면서 여러 콘텐츠를 순서대로 보여줍니다.
3. 자동 재생 및 사용자 제어 가능: 슬라이드를 자동으로 넘기거나 사용자 제어를 허용할 수 있습니다.

---

2. 기본 구조 설계

캐러셀 컴포넌트를 구현하려면 다음과 같은 요소가 필요합니다:

1. 컨테이너: 캐러셀 전체를 감싸는 영역.
2. 슬라이드 래퍼: 슬라이드들을 포함하는 영역.
3. 슬라이드 아이템: 개별 콘텐츠(예: 이미지, 텍스트 등).
4. 네비게이션 버튼: 이전/다음 슬라이드로 이동하는 버튼.
5. 인디케이터: 현재 슬라이드 위치를 표시하는 도트.

HTML 기본 구조

<div className="carousel">
  <div className="carousel-wrapper">
    <div className="carousel-item">Slide 1</div>
    <div className="carousel-item">Slide 2</div>
    <div className="carousel-item">Slide 3</div>
  </div>
  <button className="prev-button">Prev</button>
  <button className="next-button">Next</button>
  <div className="indicators">
    <span className="indicator"></span>
    <span className="indicator"></span>
    <span className="indicator"></span>
  </div>
</div>

---

3. React로 캐러셀 구현

기본 캐러셀 컴포넌트

import React, { useState } from 'react';
import './Carousel.css';

function Carousel({ items }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  const goToPrevious = () => {
    setCurrentIndex((prevIndex) => (prevIndex === 0 ? items.length - 1 : prevIndex - 1));
  };

  const goToNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex === items.length - 1 ? 0 : prevIndex + 1));
  };

  return (
    <div className="carousel">
      <div
        className="carousel-wrapper"
        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
      >
        {items.map((item, index) => (
          <div className="carousel-item" key={index}>
            {item}
          </div>
        ))}
      </div>
      <button className="prev-button" onClick={goToPrevious}>
        Prev
      </button>
      <button className="next-button" onClick={goToNext}>
        Next
      </button>
      <div className="indicators">
        {items.map((_, index) => (
          <span
            key={index}
            className={`indicator ${index === currentIndex ? 'active' : ''}`}
            onClick={() => setCurrentIndex(index)}
          ></span>
        ))}
      </div>
    </div>
  );
}

export default Carousel;

스타일링(CSS)

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
}

.prev-button,
.next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

.indicators {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.indicator {
  width: 10px;
  height: 10px;
  background-color: gray;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background-color: black;
}

---

4. 고급 기능 추가

4.1 자동 재생 기능

자동으로 슬라이드가 넘어가도록 타이머를 추가합니다:

import { useEffect } from 'react';

function Carousel({ items }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex === items.length - 1 ? 0 : prevIndex + 1));
    }, 3000);

    return () => clearInterval(timer); // 컴포넌트 언마운트 시 타이머 해제
  }, [items.length]);

  // 기존 코드 유지
}

4.2 터치 및 드래그 지원

터치 이벤트를 활용하여 모바일 사용자 경험을 개선할 수 있습니다. onTouchStart, onTouchMove, onTouchEnd를 사용해 드래그 기능을 추가합니다.

4.3 반응형 디자인

CSS를 활용하여 다양한 화면 크기에 적합한 스타일을 적용하세요. @media 쿼리를 사용하여 모바일과 데스크톱에서 다른 레이아웃을 제공할 수 있습니다.

---

5. 결론

React로 캐러셀 컴포넌트를 구현하는 것은 기본적인 React 상태 관리와 CSS 트랜지션을 이해하면 간단히 시작할 수 있습니다.

필요에 따라 자동 재생, 드래그 지원, 반응형 디자인 등을 추가하여 더욱 풍부한 사용자 경험을 제공하는 고급 캐러셀을 만들어 보세요.