시세페이지 “👀 내 작물 시세를 한 눈에" 탭에 사용자가 등록해놓은 작물 전체 차트를 스와이프로 넘기며 한 눈에 보여주는 기능을 구현했습니다.

개발 일정상 react-slick , swiper 와 같은 캐러셀 라이브러리 도입도 고려했으나 스와이프시 역동적인 애니메이션이 들어가면 가독성이 떨어지고, 원하는 레이아웃으로 구현하고자 라이브러리없이 직접 구현하기로 결정!

코드 구현

// MarketPrice.js

const MarketPrice = () => {

 const scrollRef = useRef(null);
 const [isDrag, setIsDrag] = useState(false);
 const [startX, setStartX] = useState();

 const onDragStart = (e) => {
    e.preventDefault();
    setIsDrag(true);
    setStartX(e.pageX + scrollRef.current.scrollLeft);
  };

  const onDragEnd = () => {
    setIsDrag(false);
  };

  const onDragMove = (e) => {
    if (isDrag) {
      const { scrollWidth, clientWidth, scrollLeft } = scrollRef.current;
      scrollRef.current.scrollLeft = startX - e.pageX;
      if (scrollLeft === 0) {
        setStartX(e.pageX);
      } else if (scrollWidth <= clientWidth + scrollLeft) {
        setStartX(e.pageX + scrollLeft);
      }
    }
  };

 return (
    ...
    <MyCropsChartWrap
       onMouseDown={onDragStart}
       onMouseUp={onDragEnd}
       onMouseMove={onDragMove}
       onMouseLeave={onDragEnd}
       ref={scrollRef}
     >
        <MyCropsMarketPriceCard checkedInputs={checkedInputs} />
     </MyCropsChartWrap>
     ...
 )
}

useRef 사용하여 DOM 접근

1️⃣ 좌우 슬라이드 스크롤의 움직임은 해당 DOM의 scrollLeft로 움직임.  scrollLeft를 얻기 위 해 useRef를 사용하여 DOM에 접근

이벤트

변수

1️⃣ DOM.scrollWidth스크롤 할 수 있는 총 길이

2️⃣ DOM.clientWidth설정한 max width ( 화면에 보이는 스크롤의 길이 )

3️⃣ DOM.scrollLeft스크롤 가장 왼쪽 (DOM.scrollLeft = 0 ) 부터 이동한 스크롤 길이,즉 DOM.scrollLeft 길이만큼 스크롤 이동