[UI] ImageSlider [UI요소 만들기]

📌 이미지 슬라이더(Image Slider) 컴포넌트란?

이미지 슬라이더는 여러 장의 이미지를 좌우로 넘기거나 자동으로 순서대로 보여주는 UI 컴포넌트입니다. 갤러리, 상품 프리뷰, 배너 등 다양한 곳에서 시각적 콘텐츠를 효율적으로 보여줄 때 사용됩니다.

---

🎯 주요 기능

• 다중 이미지 지원: 여러 장의 이미지를 순서대로 보여줌.
• 내비게이션: 화살표(Prev/Next) 버튼, 드래그, 스와이프 등으로 이동 가능.
• 페이지네이션: 현재 슬라이드 위치를 표시하는 인디케이터(점, 숫자 등) 제공.
• 자동 재생(옵션): 주기적으로 슬라이드를 자동 전환하는 기능(AutoPlay).
• 반응형 지원: 화면 크기에 맞게 유연하게 레이아웃 조정.
• 커스터마이징 가능: 전환 애니메이션, 속도, 루프 여부 등을 설정 가능.

---

❗️구현 내용

transition과 position을 활용한 슬라이더

const ImageSlide1_React = () => {
  const [currentIndex, setCurrentIndex] = useState(0)
  const wrapperRef = useRef<HTMLDivElement>(null)
  const animatingRef = useRef(false)

  const move = useCallback(
    (direction: Direction) => () => {
      if (animatingRef.current) return

      setCurrentIndex(prev => {
        const next = ((direction === 'right' ? prev + 1 : prev - 1) + dataLength) % dataLength
        animatingRef.current = true
        return next
      })
    },
    [],
  )

  const handleTransitionEnd = () => {
    animatingRef.current = false
  }

  return (
    <>
      <h3>#2. React</h3>
      <div className={cx('imageSlide', 'imageSlide2')} ref={wrapperRef}>
        <ul
          className={cx('container')}
          style={{ left: currentIndex * 600 * -1 + 'px' }}
          onTransitionEnd={handleTransitionEnd}
        >
          {data.map((url, index) => (
            <li key={index} className={cx('item')}>
              <LazyImage src={url} width={600} height={320} rootElemRef={wrapperRef} />
              <span>#{index + 1}</span>
            </li>
          ))}
        </ul>
        <button className={cx('navButton', 'navLeft')} onClick={move('left')} />
        <button className={cx('navButton', 'navRight')} onClick={move('right')} />
      </div>
    </>
  )
}

• 현재 인덱스가 보이는 곳으로 오도록 left값을 조정

스크롤을 활용한 이미지 슬라이더

가로스크롤을 활용하기 때문에 모바일에서 자연스러운 기능 처리 가능

  const moveTo = useCallback((index: number) => {
    if (scrollingRef.current) return
    containerRef.current!.scrollTo({
      left: index * 600,
      behavior: 'smooth',
    })
    scrollingRef.current = true
    setCurrentIndex(index)
  }, [])

  const move = useCallback(
    (direction: Direction) => () => {
      if (scrollingRef.current) return
      setCurrentIndex(prev => {
        const next = ((direction === 'right' ? prev + 1 : prev - 1) + dataLength) % dataLength
        containerRef.current!.scrollTo({
          left: next * 600,
          behavior: 'smooth',
        })
        scrollingRef.current = true
        return next
      })
    },
    [],
  )

• 스크롤 기능인 scrollTo 함수를 사용해서 처리

  useEffect(() => {
    const handleScrollEnd = () => {
      scrollingRef.current = false
    }
    const $container = containerRef.current
    if ($container) {
      $container.scrollLeft = 0
      $container.addEventListener('scrollend', handleScrollEnd)
    }
    return () => {
      $container?.removeEventListener('scrollend', handleScrollEnd)
    }
  }, [])

• scrollingRef와 scrollend이벤트를 활용하여, 스크롤이 동작하고 있을 때에는 함수를 막음