<aside> ❗ #3.5 강의 영상에 새로운 개념과 이벤트 핸들러가 등장합니다. 강의 영상만으로는 설명이 부족한 부분들을 적어놓았어요. 이 페이지의 목차를 확인하고, 강의 영상을 시청하면서 나오는 부분을 봐주시면서 공부해주세요!

</aside>

Event Handler

이벤트 핸들러 (EventHandler)는 이벤트가 발생했을 때 실행될 함수를 말합니다. 이벤트 핸들러는 이벤트를 처리하기 위해 실행할 함수를 등록하는 것으로 구현이 돼요. 강의 영상에서는 onChange가 이벤트 핸들러로 나왔네요!

<aside> <img src="/icons/light-bulb_yellow.svg" alt="/icons/light-bulb_yellow.svg" width="40px" /> react에 있는 이벤트는 너무x10000 많아요!! 개발할 때는 지금 배우는 이벤트 핸들러와 이벤트보다 훨씬 더 다양한 이벤트를 사용하게 될 거예요. 그러니 구글링을 하면서 어떤 이벤트가 있고, 어떨 때 발생하는 지를 꼭 찾아보는 걸 권장드려요!! 구글링도 개발자의 실력 요소 중 하나니까요 😉

</aside>

onChange

onChange는 입력필드의 값이 변경될 때 발생하는 이벤트를 말합니다. 보통 input태그나 select태그에 많이 씁니다. onChange 이벤트는 사용자가 입력 필드에 값을 입력/삭제할 때마다 발생하기 때문에 실시간으로 값을 업데이트할 수 있어요!

강의 영상에 나와 있는 코드를 끌어와볼게요

<input 
  value={minutes}
  id="minutes" 
  placeholder="Minutes" 
  type="number"
  onChange={넣고싶은이벤트}
/>

위 코드처럼 onChange를 input 태그에 넣어주게 되면, input 태그의 값이 바뀔 때마다 onChange가 실행됩니다!

event

const onChange = (event) => {
  console.log("somebody wrote")
}

강의 영상에서 위 코드와 같이 onChange 함수를 만들었을 거예요! 근데 파라미터 안에 있는 event는 무엇일까요? 강의 영상에서는 설명이 없는 것 같아 자세히 설명드릴게요!

위 코드에서 쓰인 event는 이벤트 객체입니다. 흔히 event 또는 e라고 자주 쓰여요.

react에서는 이벤트 객체가 이벤트 핸들러 함수에 전달이 됩니다. 이벤트 객체(e)에는 해당 이벤트에 대한 정보가 포함되어 있어요.

<input>에서 onChange 이벤트가 발생할 때, react에서는 이벤트 객체를 생성하고 이벤트 핸들러로 전달합니다. 따라서 onChange 함수의 파라미터로 이벤트 객체 e 를 전달받을 수 있는 거예요!