4.1 리액트의 이벤트 시스템

리액트의 이벤트 시스템은 일반 javascript의 이벤트핸들링과 비슷합니다.
다만 차이점은 html이 읽어져서 Dom구조가 완성되어있는 일반 자바스크립트와는 달리 virtual Dom으로써 return을 읽어야만 Dom에 접근이 가능하므로 return이 된 이후에 또는 return을 읽을때 해당 DOM에 event를 입혀야합니다.

return된 이후에는 Lifecycle에 관련되었기 때문에 Lifecycle과 hook에서 좀더 다루도록하고 return을 읽을때 이벤트를 입히는 방법은 inline으로 이벤트를 입히는 방법이 있습니다.
이때 주의할점은!

• 이벤트이름은 카멜표기법으로 작성합니다.
• 자바스크립트 코드를 전달하는게 아닌 함수의 참조값또는 함수형태로 전달합니다.
  ex)

  <div onClick={onclick}></div>
  <div onClick={()=>{함수내용}}></div>

• 만약

  <div onClick={onclick()}>

  이런형태로 전달한다면 함수가 return내부를 읽으면서 바로 실행이 되어버립니다.
• component에는 이벤트를 입힐수 없습니다. component에 이벤트형태로 입힌다면 props형태로 해당 컴포넌트에 이벤트가 전달되게 됩니다.