리액트 이미지 슬라이드 구현

리액트에서 이미지 슬라이드를 만드는 방법은 다양합니다. 그 중에서도 가장 기본적인 방법으로는 React.useState와 setInterval을 사용하여 이미지를 순환하며 슬라이드를 구현하는 것입니다.

먼저, 이미지 슬라이드에 필요한 이미지 URL을 배열 형태로 정의합니다.

jsxCopy code

const images = [ 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg', 'https://example.com/image4.jpg', 'https://example.com/image5.jpg' ];

그리고, 슬라이드를 구현할 컴포넌트를 만듭니다. 해당 컴포넌트에서는 React.useState 훅을 사용하여 현재 보여지는 이미지를 저장할 currentIndex 변수와 이미지 변경을 위한 setIndex 함수를 정의합니다.

jsxCopy code

function ImageSlider() { const [currentIndex, setIndex] = React.useState(0); return ( <div> <img src={images[currentIndex]} alt="slide" /> </div> ); }

이제, setInterval 함수를 사용하여 일정 시간마다 currentIndex 값을 변경하여 이미지가 순환하도록 만듭니다. 이때, clearInterval 함수를 사용하여 컴포넌트가 언마운트될 때 인터벌을 제거하여 메모리 누수를 방지합니다.

jsxCopy code

function ImageSlider() { const [currentIndex, setIndex] = React.useState(0); React.useEffect(() => { const intervalId = setInterval(() => { setIndex((currentIndex + 1) % images.length); }, 3000); return () => clearInterval(intervalId); }, [currentIndex]); return ( <div> <img src={images[currentIndex]} alt="slide" /> </div> ); }

이제, 이미지 슬라이드가 자동으로 순환되며 일정 시간마다 이미지가 변경됩니다. 추가적으로 슬라이드 이전/이후 버튼을 추가하거나 이미지가 변경될 때 애니메이션 효과를 주는 등의 기능을 구현할 수 있습니다.