[React-Basic-Hooks] 6. React event handling

[beecomci]

React event handling #

React event delegation

• React는 event delegation을 통해 이벤트 전달

• React v16 이전 : 타입별 이벤트를 모두 document에 하나씩 걸고 어디서든 이벤트가 발생하면 이벤트를 찾기 위해 document까지 타고 올라가고 등록된 이벤트 발견, document에서 등록된 이벤트를 찾아서 실행시킴

• React v17: document가 아니라 root element 위치로 바뀜, 여러개의 react 버전을 섞어서 사용하는걸 지원하기 위해 변경됨, react 외에 다른 라이브러리와 사용하는 경우 거기서 발생한 이벤트를 정지시킨다던가 하는 이슈가 있었음

• 실제 DOM element의 event handling과 비슷

• event callback 함수에 전달되는 event 객체는 React에서 합성한 event 객체(syntheticEvent) -> 실제 native 이벤트는 아님(실제 브라우저가 발생한 이벤트)

• 실제 native event 객체에 접근하기 위해서는 e.nativeEvent 사용 (그냥 syntheticEvent 객체가 모던 브라우저에서 사용하는 이벤트 객체와 비슷하기 때문에 사용하면 됨)

• 차이

  • event명은 camelCase: eg) onClick
  • string이 아닌 실제 function 전달
  • default 동작을 막기 위해서 return false 사용 불가
  • 대안 e.preventDefault() @05-event-handling/preventDefault

  <!-- from -->
  <button onclick="activateLasers()">
  Activate Lasers
  </button>

  // to
  <button onClick={activateLasers}>
  Activate Lasers
  </button>

• 메모리 누수를 위한 addEventListener() / removeEventListener() 사용할 필요 없음

  • React가 mount될 때 addEventListener, unmount될 때 removeEventListener
  • 실제로 각 element에 addEventListener, removeEventListener 붙는게 아니고, 로딩될 때 모든 이벤트를 root element에 붙여놓고 React가 target element에 등록된 핸들러가 있으면 동작하는 방식

• React의 syntheticEvent #

  • 거의 모든 native 이벤트를 지원
  • React는 native event를 wrapping 한 syntheticEvent를 사용
  • cross browser 대응을 해주기 때문에 사용이 편리

• Event pooling #

  • (React 17 이전 버전 사용시) event pooling 방식 사용 (event가 발생할 때마다 pool을 할당해서 사용하다가 event가 끝나면 null로 다시 할당하는 방식) -> 최적화의 의미가 떨어져서 17 버전부터는 제거된 방식
  • (React 17 이전 버전 사용시) event가 null이 된 후에 접근하면 에러가 나니 event 유지하고 싶으면 event.persist()호출
  • React 17 버전 이후로는 event.persist() event pooling 방식이 아니어서 event.persist() 호출의미가 없음.

• 참고: React 적용 가이드 - React 작동 방법

[beecomci]

React의 이벤트 시스템

React 적용 가이드 - React 작동 방법 글은 React 17 이전 버전에 대한 내용이 대부분 17 버전부터는 Event Pooling 방식 미사용 + 이벤트가 등록되는 엘리먼트가 document에서 root로 변경된 것을 제외하고 기본적인 이해만 돕고자 Event Delegation과 React syntheticEvent 객체만 정리함

추가 참고 문서

• https://xn--xy1bk56a.run/react-master/lecture/r-version-17.html#%E1%84%89%E1%85%A2%E1%84%85%E1%85%A9%E1%84%8B%E1%85%AE%E1%86%AB-%E1%84%80%E1%85%A5%E1%86%AB-%E1%84%8B%E1%85%A5%E1%86%B9%E1%84%8B%E1%85%B3%E1%86%B7

• React의 이벤트 시스템은 native 이벤트 시스템이 아닌 자체적인 이벤트 시스템으로 구현됨, 하지만 매우 비슷

Event Delegation

• 이벤트 발생 시 이벤트는 document 레벨까지 버블링되어 올라감 -> 그래서 하위 노드에서 발생한 이벤트를 부모 노드에서도 감지 가능
  • 이벤트가 전파되는 방식의 기본은 버블링이며, 캡쳐링 방식으로 변경 가능
• 이런 이벤트 전파 방식 특징을 이용해서 이벤트 위임(Event Delegation) 활용
• 특정 노드에 일일이 이벤트 리스너를 추가하는 대신, 이벤트 리스너를 특정 노드들을 포함하는 상위 노드에 연결하여 이벤트를 전파하는 것
  • 이벤트 위임이 아니라면 하위 노드들이 실시간으로 추가 or 제거될 때마다 이벤트 리스너를 매번 연결 or 제거해야함
• 위임된 이벤트는 포함된 하위 노드에 전파됨
• event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있음

버블링(Bubbling)

• 이벤트는 캡쳐링 -> event.target 노드 -> 버블링 순서대로 발생
• 각 노드에 바인딩 된 이벤트 핸들러가 capture 방식이면 캡쳐링 시에 실행되고, bubbling 방식이면 버블링시에 실행됨
  • target 노드에 바인딩 된 핸들러는 핸들러의 capture 사용 유무랑 상관 없이 캡쳐링이 끝나면 실행됨

<div class="one">
  one
    <div class="two">
      two
    <div class="three">
          three
    </div>
    </div>
</div>

var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
  div.addEventListener('click', logEvent);
});

function logEvent(event) {
  console.log(event.currentTarget.className);
}

• 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 부모 요소들로 전달되어가는 특성
  • 위 그림의 모든 div에 이벤트가 등록되어 있기 때문에 상위 요소로 이벤트 전달 확인 가능

캡쳐링(Capturing)

var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
  // addEventListener API에서 옵션 객체에 capture:true 설정 -> 해당 이벤트 감지하기 위해 버블링과 반대 방향으로 탐색
  div.addEventListener('click', logEvent, { capture: true });
});

function logEvent(event) {
  console.log(event.currentTarget.className);
}

• 버블링과 반대 방향으로 진행되는 이벤트 전파 방식

event.stopPropagation()

• event.stopPropagation()은 해당 이벤트가 전파되는 것을 막음
• 이벤트 버블링 : 클릭한 요소의 이벤트만 발생, 상위 요소로 이벤트 전파 막음
• 이벤트 캡쳐링 : 클릭한 요소의 최상위 요소의 이벤트만 발생, 하위 요소로 이벤트 전파 막음

SyntheticEvent

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

• 위에서 e 는 SyntheticEvent(합성 이벤트)
• React는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성 걱정 ㄴㄴ
• React에서는 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요 없음, 대신 엘리먼트가 처음 렌더링될 때 리스너 제공하면 됨

이벤트 핸들러 사용시 this 주의점

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 1. 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  // 2. this가 handleClick 내에서 바인딩 되도록
  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
  /*render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }*/
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

1. bind 호출

• JSX 콜백 안에서 this.handleClick 메서드를 바인딩하지 않고 onClick에 전달하면 함수가 실제로 호출될 때 this는 undefined가 됨

2. arrow function 사용

• Toggle이 렌더링될 때마다 다른 콜백이 생긴다는 문제점
• 콜백이 하위 컴포넌트로서 props로 전달된다면, 그 컴포넌트들은 추가로 다시 렌더링될 수 있는 성능적인 문제

이벤트 핸들러에 인자 전달

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

• arrow function을 사용하는 경우 명시적으로 e를 전달해야 하지만, bind를 사용할 경우 e가 추가 인자로서 자동 전달됨