[ ReactJS + Carousel ] 리액트 프로젝트에서 이미지 슬라이드 만들기

Carousel 이란?

---

Carousel은 웹 페이지나 애플리케이션에서 이미지나 콘텐츠를 순환적으로 보여주는 슬라이드 쇼 형태의 컴포넌트입니다. Carousel은 사용자에게 다양한 콘텐츠를 시각적으로 전달하고, 사용자 상호작용을 통해 콘텐츠 간의 전환을 가능하게 합니다.

Carousel은 여러 개의 슬라이드로 구성되어 있으며, 각 슬라이드에는 이미지, 텍스트, 버튼 등 다양한 콘텐츠를 포함할 수 있습니다. 일반적으로 좌우 화살표나 점(dot) 형태의 인디케이터를 사용하여 사용자가 슬라이드를 이동하거나 특정 슬라이드로 이동할 수 있도록 합니다.

 

 

프론트엔드 분야에서 자주 사용되는 Carousel은 다양한 기능과 설정을 제공하여 사용자 정의가 가능합니다. 몇 초마다 자동으로 슬라이드가 전환되도록 타이머를 설정하거나, 드래그나 스와이프 동작으로 슬라이드를 이동할 수 있는 기능을 추가할 수도 있습니다. 또한, 애니메이션 효과나 전환 속도 등의 스타일을 변경하여 사용자 경험을 개선할 수도 있습니다.

리액트 환경에서 Carousel을 개발할 때는 일반적으로 리액트 컴포넌트를 사용하며, 상태 관리, 이벤트 처리, 슬라이드 전환 등을 구현합니다. 여러 라이브러리나 패키지도 존재하여 리액트 Carousel을 구현하는 데 도움을 줍니다.

 

 

 

 

[ 티스토리 ] 애드센스 하루 100명 방문자수 수익 공개

[ 티스토리 ] 애드센스 하루 100명 방문자수 수익 공개

 

 

 

---

 

리액트 환경에서 Carousel 구현

---

 

리액트 환경에서 슬라이더 만들어보는데 설치와 작업 과정이 다음과 같습니다.

 

1. react-responsive-carousel  설치 

npm i react-responsive-carousel

 

2.  이미지  파일 만들기, 간단한 data.js 파일 생성 후 다음  이미지 정보나 원하는 이미지를 사용 가능합니다.

const imageData = [
  {
    label: "Image 1",
    alt: "image1",
    url: "https://picsum.photos/200/300",
  },

  {
    label: "Image 2",
    alt: "image2",
    url: "https://picsum.photos/200/300",
  },

  {
    label: "Image 3",
    alt: "image3",
    url: "https://picsum.photos/200/300",
  },

  {
    label: "Image 4",
    alt: "image4",
    url: "https://picsum.photos/200/300",
  },

  {
    label: "Image 5",
    alt: "image5",
    url: "https://picsum.photos/200/300",
  },
];

export default imageData;

 

 

3.  원하는 컴퍼넌트로 react-responsive-carousel과 생성된 이미지 데이터 파일 import해옵니다.

import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

import imageData from "../asset/data/carousel";

 

 

4.  이미지 자료들 반복문으로 렌더링 해봅니다. 데이터 파일 안에  5개정도 이미지 들어가 있어서 슬라이드도 5개 반복됩니다. 이미지 목록을 렌더링하는 JSX 코드 모든 이미지 슬라이드의 JSX 코드는 Array.map() 함수를 "imageData" 배열에 적용하여 생성됩니다.

const renderSlides = imageData.map(image => (
    <div key={image.alt}>
      <img src={image.url} alt={image.alt} />
  </div>
));​

 

 

 

 

 

[ 티스토리 ] 애드센스 하루 100명 방문자수 수익 공개

[ 티스토리 ] 애드센스 하루 100명 방문자수 수익 공개

 

 

5. 반응 상태를 사용하여 회전축 구성 요소 제어 이제 이미지 회전 장치가 예상대로 작동하지만 추가 기능을 추가할 수 없습니다. 따라서 <Carousel/> 성분은 React 상태로 제어되어야 합니다. 해류인덱스 상태는 활성 이미지 슬라이드의 인덱스를 유지하고 handleChange() 함수는 현재를 업데이트합니다함수 매개 변수를 기반으로 하는 인덱스입니다.

 const [currentIndex, setCurrentIndex] = useState();
  function handleChange(index) {
    setCurrentIndex(index);
  }

 

6. <Carousel/> 구성 요소에는 선택한 값을 React 상태로 바인딩하기 위한 "selectedItem" 및 "onChange" 소품이 제공됩니다.

        <Carousel
          showArrows={false}
          autoPlay={true}
          infiniteLoop={true}
          showThumbs={false}
          selectedItem={imageData[currentIndex]}
          onChange={handleChange} >
          {renderSlides}
        </Carousel>

 

Arrow 표시나 Loop와 관련된 사항은 언제든지 변경될 수 있습니다. 다음 최신 공식 문서를 확인하는 것이 가장 좋습니다. 중요한 기능과 함수들 다음과 같습니다.

https://www.npmjs.com/package/react-responsive-carousel  

Name	Description
ariaLabel	Define the aria-label attribute for the root carousel element. The default is undefined, skipping the attribute from markup.
axis	Define the direction of the slider, defaults to 'horizontal'.
autoFocus	Force focus on the carousel when it renders.
autoPlay	Change the slide automatically based on interval prop.
centerMode	Center the current item and set the slide width based on centerSlidePercentage.
centerSlidePercentage	Define the width percentage relative to the carousel width when centerMode is true.
dynamicHeight	The height of the items will not be fixed.
emulateTouch	Enable swipe on non-touch screens when swipeable is true.
infiniteLoop	Going after the last item will move back to the first slide.
interval	Interval in milliseconds to automatically go to the next item when autoPlay is true, defaults to 3000.
labels	Apply aria-label on carousel with an object with the properties leftArrow, rightArrow and item. The default is {leftArrow: 'previous slide / item', rightArrow: 'next slide / item', item: 'slide item'}.
onClickItem	Callback to handle a click event on a slide, receives the current index and item as arguments.
onClickThumb	Callback to handle a click event on a thumb, receives the current index and item as arguments.
onChange	Callback to handle every time the selected item changes, receives the current index and item as arguments.
onSwipeStart	Callback to handle when the swipe starts, receives a touch event as argument.
onSwipeEnd	Callback to handle when the swipe ends, receives a touch event as argument.
onSwipeMove	Callback triggered on every movement while swiping, receives a touch event as argument.
preventMovementUntilSwipeScrollTolerance	Don't let the carousel scroll until the user swipe to the value specified on swipeScrollTolerance.
renderArrowPrev	Render custom previous arrow. Receives a click handler, a boolean that shows if there's a previous item, and the accessibility label as arguments.
renderArrowNext	Render custom previous arrow. Receives a click handler, a boolean that shows if there's a next item, and the accessibility label as arguments.
renderIndicator	Render custom indicator. Receives a click handler, a boolean that shows if the item is selected, the item index, and the accessibility label as arguments.
renderItem	Render a custom item. Receives an item of the carousel, and an object with the isSelected property as arguments.
renderThumbs	Render prop to show the thumbs, receives the carousel items as argument. Get the img tag of each item of the slider, and render it by default.
selectedItem	Set the selected item, defaults to 0.
showArrows	Enable previous and next arrow, defaults to true.
showStatus	Enable status of the current item to the total, defaults to true.
showIndicators	Enable indicators to select items, defaults to true.
showThumbs	Enable thumbs, defaults to true.
statusFormatter	Formatter that returns the status as a string, receives the current item and the total count as arguments. Defaults to {currentItem} of {total} format.
stopOnHover	The slide will not change by autoPlay on hover, defaults to true.
swipeable	Enable the user to swipe the carousel, defaults to true.
swipeScrollTolerance	How many pixels it's needed to change the slide when swiping, defaults to 5.
thumbWidth	Width of the thumb, defaults to 80.
transitionTime	Duration of the animation of changing slides.
useKeyboardArrows	Enable the arrows to move the slider when focused.
verticalSwipe	Set the mode of swipe when the axis is 'vertical'. The default is 'standard'.
width	The width of the carousel, defaults to 100%.

 

---

 

 

 

천제 소스 코드

---

마지막으로 천제 소스 코드입니다. App.js

import { React, useState, useEffect } from "react";

import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

import imageData from "../asset/data/carousel";

const renderSlides = imageData.map(image => (
    <div key={image.alt}>
      <img src={image.url} alt={image.alt} />
  </div>
));

const Header = () => {

 const [currentIndex, setCurrentIndex] = useState();
  function handleChange(index) {
    setCurrentIndex(index);
  }

  return (
    <div className="flex justify-center items-center py-5 px-3">
        <Carousel
          showArrows={false}
          autoPlay={true}
          infiniteLoop={true}
          showThumbs={false}
          selectedItem={imageData[currentIndex]}
          onChange={handleChange}
          className="w-[400px] lg:hidden">
          {renderSlides}
        </Carousel>
    </div>
  );
};

export default Header;

 

 

 

 

 

[ 티스토리 ] 애드센스 하루 100명 방문자수 수익 공개

[ 티스토리 ] 애드센스 하루 100명 방문자수 수익 공개

 

 

 

 

 

---