이벤트 처리하기 - 주요 개념

이벤트 핸들러 function (@합성 이벤트)를 정의한 뒤,
JSX 태그에 prop으로 전달하면 된다!

합성 이벤트 synthetic event

• 브라우저 고유 이벤트 nativeEvent : 브라우저에서 발생하는 원시 이벤트.
• 합성 이벤트 : nativeEvent를 추상화한 것. 브라우저마다 nativeEvent 이름이나 타입이 달라서, 다양한 플랫폼에서 동일한 방식으로 동작하도록 해준다고 함.
  ex) mouseout -> onMouseLeave.

DOM 이벤트 처리와의 차이점

• camelCase : JSX 특. 안쓰고 복붙하면 작동 안되고 콘솔에 warning이 잔뜩..
• 함수 : 문자열이 아니라 함수!

/* HTML, DOM */
onClick="someEventHandlerFunction()"

// React, JSX
onClick={someEventHandlerFunction}
// or
onClick={() => someEventHandlerFunction()}

이제부터는 beta 공식문서 내용으로 정리하겠다!

이벤트 핸들러 함수는 function 이나 const로 정의 되지 않고도, inline 스타일 화살표 함수로도 사용할 수 있음.

onClick = {() => alert("클릭됐지롱")}

주의 1 : 함수를 실행하지 말것

이벤트 핸들러 함수는 props로 전달되는 것이다. JS에서 함수도 객체이기 때문에 엄밀히 말하면 이벤트 발생 시 객체로서의 함수를 실행해달라고 전달하는 것.
여기서 함수를 실행시키면 렌더링마다 실행됨.

// 이렇게 하면 안됨!!
onClick={alert("렌더링할때마다 alert 띄울거야?")}

주의 2 : 이벤트 전파 (Event Propagation)

부모 태그, 자식 태그 둘 다 onClick 리스너가 있을 때, 자식 태그를 click 하면 두 리스너 모두 실행된다.

<div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <button onClick={() => alert('Playing!')}>
        Play Movie
      </button>
</div>

툴바랑 버튼이 있다. 둘 다 onClick이 있으면 버튼을 눌렀을 때 툴바의 onClick까지 두 이벤트가 다 실행됨.

막는 법 : Stopping Propagation

이벤트 핸들러 함수 (ex. handleClick) 는 하나의 인자만을 받는다 ! (마치 component가 props만을 받는 것처럼)
컨벤션으로 "e"라고 쓰는 경우 많음.

• 이벤트 객체의 e.stopPropagation() 메서드 : 전파를 막아준다. 자식 이벤트 리스너에 넣어주면 막을 수 있음.
• e.preventDefault() 메서드 : form 태그같은 경우 버튼 클릭 시 default로 submit 하고 페이지를 새로고침 하는 이벤트가 발생함. 이런것을 막아줄 수 있다.

주의 3 : 부작용 Side Effects

• 이벤트 리스너 함수들은 pure function 일 필요가 없다!
• 그래서 어떤 값들을 바꿀 때 쓰면 매우 좋다!
  예를 들어, input 태그에 타이핑을 하는 경우, 어떤 state를 바꿀 때.
• 원래 그렇게 쓰는 게 맞는데, state가 끼어서 pure function이 아니게 되니까 부작용을 주의하자는 말인 듯 함!
  여기서 state를 컴포넌트의 memory라고 표현했다. 처음 듣는 표현인데 좋은 설명인듯. 다음장은 beta 버전 state 정리를 해야겠다.