이미지 슬라이더 만들기 (React, scss)

만들고자 하는 것

쇼핑몰 이벤트 구역에서 배너를 돌아가게 하는 이미지 슬라이더를 만들 것이다.

 

소스코드

이미지를 div로 감싼 후에 해당 div의 className에서 현재 인덱스를 가지고 있는 current 상태값과 비교를 통해

클래스명을 컨트롤 해준다.

 

모든 이미지의 opacity: 0; 으로 설정하여 현재 이미지의 순서가 아니면 이미지가 보이지 않도록 설정한다.

 

그리고 인덱스가 같을 경우 current에 대한 css를 opacity: 1; 을 넣어줌으로써 해당 이미지가 보일 수 있도록 해준다.

const [current, setCurrent] = useState(0) // 이미지 배열의 현재 인덱스, 특정 초마다 변경됨
const sliderLength = sliderData.length // 전체 이미지의 개수 (이미지 배열의 길이)

const INTERVAL_TIME = 5000 // 5초마다 돌아가게 할 것

const changeImage = useCallback(() => {
	// 만약 현재 마지막 이미지라면 0번째로 돌아가기
    // 마지막 이미지가 아니라면 index 1 추가해서 다음 사진 타겟팅하기
	setCurrent(current === sliderLength - 1 ? 0 : current + 1)
}, [current, sliderLength])

useEffect(() => {
	const interval = setInterval(changeImage, INTERVAL_TIME)
    
    // 만약 화면에서 컴포넌트가 사라지게 되면 interval 삭제 처리
    // 사라지지 않는다면 새로운 interval을 계속 생성해서 이미지가 넘어가게 됨
    return () => {
    	clearInterval(interval)
    }
}, [changeImage])

return (
	{sliderData.map((slider, idx) => {
    	const { image, title } = slider
        
        return <div key={title} className={idx === current ? `slide current` : `slide`}>
        	<Image src={image} alt={title} fill />
        </div>
    })}
)

.slide {
	opacity: 0; // 기본적으로 이미지가 보이지 않도록 함
    transition: all 0.5s ease; // 이미지가 서서히 바뀌도록 
}

.current {
	opacity: 1;
}