Event handling

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는
방식과 매우 유사하다.

몇 가지 문법 차이가 있다.

• React 에서 events 이름은 반드시 camelCase(카멜케이스, 낙타표기)를 사용해야 한다.
• React 에서 event handler(이벤트 핸들러)는 JSX 형태로 함수를 표기한다.
  
  

HTML과 React에서의 차이를 예제를 통해 확인해보자

//HTML
<button onclick="helloWorld()">
  hellow World
</button>

//React
<button onClick={helloWorld}>
  hellow World
</button>

위 예제를 살펴보면, onClick 와 같이 camelCase로 이벤트 이름을 설정하고,
event handler의 연결은 JSX 표기인 { }을 사용하고 있다.

Event 기본동작 막는 방법

HTML 에서는 return flase; 를 반환해서 event의 기본동작을 막았지만,
React에서는 preventDefault를 이용하여 event 기본동작을 막는다.

...
<a href="#" handleClick="alert('clicked'); return false">
  Click me
</a>
...

...
    handleClick(e) {
        e.preventDefault();
        alert('clicked');
    }
...

e.stopPropagation(), e.preventDefault() 차이

e.preventDefault()는 고유 동작을 중단시키고,
e.stopPropagation() 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.

Event Binding

Event에서 가장 중요한 부분이 binding이다.
binding이 가장 중요한 이유는 binding을 따로 지정해주지 않으면 해당 metod에서 호출하는
this가 해당 class 안에서의 event값이 아닌 최상위인 window에서 값을 가져올수 있기 때문 이다.

render() {
    return (
      // 1. test1 - undefined
      // 2. test2 - event log
      <div>
        <button onClick={ function() {console.log(this)}}>test1</button>
        <br />
        <button onClick={() => console.log(this)}>test2</button>
      </div>
    );
}

위 예제를 보면 test1버튼은 따로 this binding을 하지않고 console에 this값이 나타나도록 했을때
undefinde가 결과로 나온다.
test2버튼은 this binding(화살표 함수)를 사용하고 this값을 나타내도록 했을때
해당 class this값이 결과로 나온다.