[웹 프로젝트] 리액트로 Carousel(Slider) 스크롤 방식으로 구현하기

 

🎈 왜 스크롤 형식으로?

여러 방식을 고안해봤는데, 한 뷰에 하나 또는 2개 이상의 컨테이너를 띄우는 경우를 나누지 않고
가장 편하게 구현할 수 있을 것 같았다.

 

🎈 구현 방식

const currentRef = useRef(null);

const next = (ref) => {
    const offsetX = ref.current.offsetWidth;

    ref.current.scrollBy(offsetX, 0);
};

<button onClick={() => next(currentRef)}></button>

<div ref={currentRef}/>

React Hook의 useRef를 이용하여 캐러셀 전체 영역을 저장하고,
버튼을 만들어 offsetWidth로 현재 보이는 영역의 width를 얻어서
버튼을 누르면 그 만큼을 +로 옮기면 완성!
(css는 생략했지만 scrollX는 hidden으로 변경해줘야 원하는 느낌이 산다)

정말 쉽고 간단하기 때문에 정말 디테일한(뷰에 원하는 개수만큼만 딱딱 끊어서 보여줘야 하는 등)
요구사항이 필요한 게 아니라면 이 방식으로 간단한 슬라이더를 구현하기 좋은 것 같다.