리액트 캐러셀 반복

무한 캐러셀을 구현하기 위해서는 데이터를 순환하는 방법을 사용해야 합니다. 이를 위해 자바스크립트의 Array 메서드인 slice, concat 등을 활용하면 좋습니다. 예를 들어, 기존에 사용하고 있는 영화 데이터 array가 있을 때, 현재 인덱스 위치에서 몇 개의 아이템을 가져와 배열의 뒷 부분에 추가하면 됩니다. 아래는 리액트에서 무한 스크롤러를 만들 수 있는 간단한 예제 코드입니다: ```jsx import React, { useState } from 'react'; const Carousel = ({ items }) => { const [currentIndex, setCurrentIndex] = useState(0); const handleNext = () => { setCurrentIndex((currentIndex + 1) % items.length); }; const handlePrev = () => { setCurrentIndex((currentIndex - 1 + items.length) % items.length); }; // 첫 번째 요소를 마지막으로 이동 const rearrangedItems = [...items.slice(currentIndex), ...items.slice(0, currentIndex)]; return ( <div> <button onClick={handlePrev}>Previous</button> <div className='carousel-container'> {rearrangedItems.map(item => ( // Carousel Item rendering... ))} </div> <button onClick={handleNext}>Next</button> </div> ); }; ``` 위의 Carousel 컴포넌트는 props로 item list를 받아 carousel을 생성합니다. currentIndex state는 현재 보여지고 있는 carousel item의 index를 나타냅니다. 'Previous'와 'Next' 버튼을 클릭할 때 마다 currentIndex는 업데이트 됩니다. 최근 인덱스에서 item 배열의 나머지 부분과 첫 부분을 잘라내어 연결(concat)하면, 무한으로 돌아가는 carousel이 만들어집니다. 이런 방법으로 무한 캐러셀을 구현해볼 수 있습니다.