리액트에서 터치 이벤트로 스와이프 구현

서비스에 휠 이벤트를 이용해 데이터를 바꿔주는 로직이 있었다

데스크탑에서는 wheel 이벤트를 사용하고, 모바일에서는 touch 이벤트를 사용했는데, 그중 onTouchMove에 이벤트 핸들러를 등록해 사용했다.

 

그리고 event객체에서 touches[0].clientY와 changedTouches[0].clientY를 받아 둘을 비교한 결과에 따라 위로 스와이프 했는지, 아래로 스와이프 했는지 판단했다.

 

  //터치의 시작이 끝보다 위면 up, 아래면 down
    if (e.touches[0].clientY < e.changedTouches[0].clientY) {
      setDrag("up");
    }
    if (e.touches[0].clientY > e.changedTouches[0].clientY) {
      setDrag("down");
    }

 

하지만 touches[0].clientY에서 터치 시점의 좌표, changedTouches[0].clientY에서 마지막 터치 지점의 좌표일 것이라는 내 생각과는 다르게 둘의 값은 같았다.

 

알고 보니 터치 이벤트 타입은 여러 개가 있었고 (touchStart, touchEnd ...)

각 타입에 따라 특정 시점의 좌표값을 가지고 있다는 것을 알게 되었다.

 

이에 따라 코드를 다음과 같이 수정했다.

 

  const onTouchStartPosition = (e: React.TouchEvent<HTMLDivElement>) => {
    setStartTouchPosition({
      y: e.changedTouches[0].clientY,
    });
  };

 

onTouchStart에 등록할 함수를 작성하고

  const onTouchMoveActFlip = (e: React.TouchEvent<HTMLDivElement>) => {

    //터치의 시작이 끝보다 위면 up, 아래면 down
    if (e.changedTouches[0].clientY - startTouchPosition.y > 0) {
      setDrag("up");

    }
    if (e.changedTouches[0].clientY - startTouchPosition.y < 0) {
      setDrag("down");

    }
}

 

onTouchEnd에 등록할 함수를 작성했다.

        <PageInner
          onTouchStart={onTouchStartPosition}
          onTouchEnd={onTouchMoveActFlip}
        >

 

그리고 각 함수를 이벤트 핸들러로 등록해 주자 의도대로 잘 동작하였다.

 

 

 

Reference

https://developer.mozilla.org/ko/docs/Web/API/Touch_events 

Touch events - Web API | MDN

https://velog.io/@hemtory/ReactTouchEvent