React Carousel에서 Swipe 이벤트를 처리하는 방법

이전에는 이전 슬라이드와 다음 슬라이드로 이동하는 간단한 버튼이 있는 간단한 회전 목마를 React에서 만들었습니다.

이제 터치스크린 장치를 위한 간단한 스와이프 이벤트를 추가할 것입니다. 이것은 특히 스마트폰과 같은 모바일 장치에서 한 손가락으로 더 쉽게 탐색할 수 있도록 하는 데 유용합니다.

전제 조건

이 시리즈의 제 1부를 확인하여 간단한 반응 캐러셀을 만드는 단계별 가이드를 따르거나 my github repo에서 직접 가져올 수 있습니다.

스와이프 이벤트 처리

Javascript에서 onTouchStart, onTouchMove 및 onTouchEnd 리스너를 사용하여 스와이프 이벤트 핸들러를 추가할 수 있습니다. 지금은 onTouchStart 및 onTouchMove만 사용합니다.

온터치스타트

onTouchStart는 touchstart event을 트리거하는 이벤트 리스너입니다. 이 애플리케이션에서는 onTouchStart를 사용하여 사용자가 처음으로 화면을 터치하는 위치를 기록합니다. 이 값은 사용자가 화면을 탭하기만 하는지 아니면 실제로 스와이프 동작을 시작하려는지 측정하는 데 사용됩니다.

Carousel.js - onTouchStart용 핸들러 추가

// ...
const [touchPosition, setTouchPosition] = useState(null)
// ...
const handleTouchStart = (e) => {
    const touchDown = e.touches[0].clientX
    setTouchPosition(touchDown)
}
//...

Carousel.js - handleTouchStart를 onTouchStart 수신기에 바인딩

  ...
- <div className="carousel-content-wrapper">
+ <div
+    className="carousel-content-wrapper"
+    onTouchStart={handleTouchStart}
+ >
  ...

이제 사용자가 Carousel Content Wrapper 내부의 화면을 터치할 때마다 위치가 touchPosition 상태로 저장됩니다.

온터치무브

onTouchMove는 사용자가 화면에서 손가락을 움직일 때마다 touchmove event를 트리거하는 이벤트 리스너로 사용자 손가락의 현재 위치를 계속 확인합니다.

그렇다면 이 이벤트 리스너를 사용하는 요점은 무엇입니까? 사용자 손가락의 초기 위치와 현재 위치를 알면 사용자 손가락의 이동 속도를 측정할 수 있으며 사용자가 현재 스와이프하고 있는지 여부와 스와이프 방향을 확인할 수 있습니다.

스 와이프 방향을 결정하려면 손가락 이동의 최소 속도가 필요합니다. 내 경험상 5와 -5가 내 응용 프로그램에 가장 적합합니다(음수 값은 사용자가 오른쪽으로 스와이프함을 의미). 응용 프로그램에 가장 적합하도록 값을 변경해야 할 수 있습니다.

Carousel.js - onTouchMove에 대한 핸들러 추가

// ...
const handleTouchMove = (e) => {
    const touchDown = touchPosition

    if(touchDown === null) {
        return
    }

    const currentTouch = e.touches[0].clientX
    const diff = touchDown - currentTouch

    if (diff > 5) {
        next()
    }

    if (diff < -5) {
        prev()
    }

    setTouchPosition(null)
}
// ...

Carousel.js - onTouchMove 수신기에 handleTouchMove 바인딩

  ...
  <div
     className="carousel-content-wrapper"
     onTouchStart={handleTouchStart}
+    onTouchMove={handleTouchMove}
  >
  ...

그리고 끝났습니다!

이전 및 다음 슬라이드 탐색을 처리하기 위해 스와이프 리스너를 추가했습니다. 한 가지 더 할 수 있는 단계는 터치스크린 장치에서 컨트롤 버튼을 숨기는 것입니다. 여전히 버튼을 표시하려는 사용 사례가 있으므로 이를 추가 단계로 추가합니다.

터치스크린 장치에서 컨트롤 버튼 숨기기

장치가 터치스크린을 사용하는지 또는 css만 사용하지 않는지 감지하려면 터치스크린과 포인터를 감지할 수 있는 css 선택기를 설명하는 페리에 의해 thisarticle을 읽을 수 있습니다.

기본적으로 display: none; 및 .left-arrow 클래스에 .right-arrow를 추가하려고 합니다.

Carousel.css

/* ... */
@media (hover: none) and (pointer: coarse) {
    .left-arrow, .right-arrow {
        display: none;
    }
}
/* ... */

그리고 그게 다야!
최종 풀코드는 my Github 에서 확인하실 수 있습니다.

스 와이프 이벤트를 더 잘 처리하는 방법에 대한 제안이 있으면 댓글에 알려주십시오! 나는 당신의 아이디어를 듣고 싶습니다.

다음 게시물은 캐러셀에서 한 번에 여러 항목을 표시하는 방법에 대한 것입니다.