리엑트 Touch Event 사용방법

React에서 Touch Event 사용방법

이벤트 등록과 제거를 componentDidMount()과 componentWillUnmount()에서 해줘야 합니다.
SPA이기 때문에 이벤트 제거를 잘하지 않으면 어플리케이션 전체에 영향을 미치기 때문에 주의 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React, { Component } from 'react';
class ReactEvent extends Component {
    constructor(props) {
        super(props);		
        this.setEventTouch = this.setEventTouch.bind(this);
    }
    
    componentDidMount() {
        document.addEventListener('touchstart', this.setEventTouch);
        document.addEventListener('touchmove', this.setEventTouch);
        document.addEventListener('touchend', this.setEventTouch);
    }
    
    componentWillUnmount(){
        document.removeEventListener('touchstart', this.setEventTouch);
        document.removeEventListener('touchmove', this.setEventTouch);
        document.removeEventListener('touchend', this.setEventTouch);
    }
    
    setEventTouch(e = {}) {
        switch (e.type){
            case 'touchstart':
            	this.isDrag              = false;
                this.touchStartPositionX = e.changedTouches[0].clientX;
                this.touchStartPositionY = e.changedTouches[0].clientY;
                
                break;
            case 'touchmove':
                this.isDrag = true;
                
                break;
            case 'touchend':
                this.touchEndPositionX = e.changedTouches[0].clientX;
                this.touchEndPositionY = e.changedTouches[0].clientY;
                
                break;
            default:
                
        }
    }
    
    render() {
        return (<div>React Event Test</div>);
    }
    
}

export default ReactEvent;

Touch event 종류

touchstart

터치 표면에 터치 포인터가 놓여지면 이벤트 전송

touchend

터치 포인터가 제거 되었을 때 이벤트 전송

touchmove

표면을 따라 터치 포인트를 이동할 때 이벤트 전송

Touchmove 이벤트 전송 속도는 브라우저에 따라 다르며 사용자 하드웨어 성능에 따라 다를 수도 있음

touchcancel

터치 포인트가 어떤 식으로든 중단되면 전송

Passive event

Passive event 는 특별히 모바일에서 scroll 성능 향상을 위한 새로운 웹표준 입니다.

기존 스크롤 이벤트는 canceled 를 할 수 없습니다. 그래서 passive 설정을 하지 못합니다.

그러나 handler 안에서 expensive work 를 방지해야 합니다.

scroll jank

페이지가 스크롤링 되기 전에 항상 리스너가 끝나기를 기다리는 지연이을 가리키는 말

passive event listener 는 addEventListener 의 options 파라미터에서 리스너가 스크롤을 절대 취소하지 않는다는 것을 나타내는 플래그를 설정할 수 있도록 하여 이 문제를 해결합니다.

addEventListener

Syntax

1
2
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

Parameters

  • type

    Event type 지정

  • listener

    지정된 Event type이 발생했을 때 알림을 받을 callback 함수

  • options

    • capture: 이벤트 캡쳐링 적용 여부. 크롬 49부터 지원

    • once: 이벤트를 한번만 호출하고 해제되는 옵션. 크롬 55부터 지원

    • passive: 스크롤 성능 향상을 위한 옵션으로 true일 경우, 스크롤을 위해 블록되는 것을 방지한다. 이 경우, preventDefault를 사용할 수 없다. 크롬 51부터 지원

  • useCapture

Usage notes

1
2
3
4
5
6
7
8
9
document.addEventListener('touchstart', handler, false);


// Chrome 49 부터 EventListenerOptions 지원
document.addEventListener("touchstart", handler, {
  capture: false, // Chrome 49
  once: false, // Chrome 55
  passive: false // Chrome 51
});

addEventListener 하위 브라우저 지원 방법

Chrome 54+ 부터 EventListenerOptions의 passive 속성이 특별한 상황일 경우에는 기본값이 true로 설정된다.

document또는 body에 이벤트 리스너를 추가할때, touchstart, touchmove와 같이 스크롤이 블록되는 이벤트인 경우, passive의 기본 속성값은 true가 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
document.addEventListener(
  "touchmove",
  function(e) {
    e.preventDefault();
  },
  isPassive()
    ? {
        capture: false,
        passive: false
      }
    : false
);

function isPassive() {
  var supportsPassiveOption = false;
  try {
    addEventListener(
      "test",
      null,
      Object.defineProperty({}, "passive", {
        get: function() {
          supportsPassiveOption = true;
        }
      })
    );
  } catch (e) {}
  return supportsPassiveOption;
}

References