[React] touch 이벤트 다루기

 

React logo image

 

이전에 만든 리액트 프로젝트의 모바일 화면을 수정하기 위해 touch 이벤트를 다루는 방법을 찾아 보게 되었다. 

명칭이 touch carousel이 맞는지는 정확히 모르겠지만,,😅 내가 만들고자 한 화면은 넷플릭스 모바일 앱 화면과 비슷하다.

화면 터치가 되고 있는 슬라이드만 움직이고, 슬라이드의 양 끝에 도달하면 더이상 슬라이드 되지 않는다.

 

 

touch 이벤트 사용하기

// 모바일 화면일때 touchX 값 관리
const [ touchX, setTouchX ] = useState(0);

// 화면 터치가 시작되면 X값을 설정함
function onTouchStart(e) {
    setTouchX(e.changedTouches[0].pageX);
}

// 화면 터치가 완료되면 해당 ul의 left값만 변경함
function onTouchEnd(e) {
    const distanceX = touchX - e.changedTouches[0].pageX;
    const targetUl = e.target.closest('ul');
    const targetUlWidth = targetUl.offsetWidth / 2;
    const newLeft = Math.abs(parseFloat(targetUl.style.left)) + distanceX;

    if(newLeft < 0) {
        targetUl.style.left = '0px';
    }else if(newLeft < targetUlWidth) {
        targetUl.style.left = `-${newLeft}px`;
    }else {
        targetUl.style.left = `-${targetUlWidth}px`;
    }
}

touch가 시작되면 터치 이벤트의 pageX 값을 touchX 값으로 설정한다.

touch가 끝나는 시점에서는 설정된 touchX와 새로운 pageX 값의 차이를 계산하여 그만큼 캐러셀의 left값을 변경하여 움직이게 한다.

여기서 각각의 캐러셀이 독립적으로 움직이게 하기 위해 각 targetUl의 left값을 받아와서 다시 설정 하도록 하였다.

그리고 targetUlWidth를 설정하여 캐러셀이 가장 오른쪽 끝에 도달하면 더이상 움직이지 않도록 하였다.

내가 만든 캐러셀은 이미지 갯수가 많지 않아서 일단은 원래 너비의 반으로만 설정하였는데, 이 부분은 조금 더 보완이 필요할 것 같다..

 

touch 이벤트 적용하기

<ul style={{ left: '0px' }} 
    onTouchStart={onTouchStart} 
    onTouchEnd={onTouchEnd}
>
	...   
</ul>

위에서 작성한 함수를 각각 onTouchStart와 onTouchEnd에 적용해주면 된다.

 

 

CSS도 알맞게 적용해주면 끝!

정확한 명칭을 몰라서 비슷한 글을 참고하며 만들었기 때문에 이것을 구현할 수 있는 더 좋은 방법이 있을 것도 같다. 

폰에서 확인해 본 결과 내가 의도하던 대로 작동이 잘 되긴 하는데, 보완해야 할 부분을 좀더 수정해야 할 것 같다. 🤔

 

 

---

참고:

https://velog.io/@miminishin/swiper.js-%EC%97%86%EC%9D%B4-swipe-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-1

https://velog.io/@leehyunho2001/React%EC%97%90%EC%84%9C-%EB%A7%88%EC%9A%B0%EC%8A%A4-%EB%93%9C%EB%9E%98%EA%B7%B8%EC%99%80-%EB%AA%A8%EB%B0%94%EC%9D%BC-%ED%84%B0%EC%B9%98-%EB%8B%A4%EB%A3%A8%EA%B8%B0

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