[React] 📖 이벤트 핸들링

1. Event Handling 이란?

• Event : 웹 내부에서 발생하는 사용자의 행동
  ex) 버튼 클릭, 메세지 입력, 스크롤 등등
• Handling : 다루다, 취급하다, 처리하다
• Event Handling
  : 이벤트가 발생했을 때 그것을 처리하는것
  ex) 버튼 클릭 시 경고창 노출

📍 이벤트 핸들링 예시

onClick={() => {
  console.log(text);
}}

1-1. 주요 Event Handling 종류

이벤트	설명
mouse	---
click	요소를 클릭
dbclick	요소를 더블클릭
mouseover	요소에 마우스를 오버했을 경우
mouseout	요소에 있는 마우스를 요소에서 벗어났을 경우
mousedown	요소를 눌렀을 경우
mouseup	요소를 눌렀다가 떼었을 경우
key	---
keydown	키를 눌렀을 경우
keyup	키를 눌렀다가 떼었을 경우
keypress	키를 누른 상태인 경우

---

2. Event Handling 예제

2-1. 버튼 클릭 시 Console 창에 버튼 text 출력

{()=>{}} : 화살표가 가르키는 함수를 실행

2-1-1. 매개변수 사용

<button
  onClick={() => {
   console.log(text);
  }}
>
</button>

2-1-1. 함수 사용

 const onClickButton = () => {
    console.log(text);
 };
  return (
    <button onClick={onClickButton}>

3. 이벤트 객체

: 이벤트 핸들러 함수를 호출하면서 호출된 이벤트 핸들러 함수에 매개변수로 이벤트 객체라는 것을 제공

<button
  onClick={() => {
   console.log(text);
  }}
>
</button>

• 여기에 매개 변수 값을 넣어주면 이벤트 객체가 생성된다.

<button
  onClick={(e) => {
   console.log(e);
   console.log(text);
  }}
>
</button>

• 임의 버튼 클릭 시 아래의 이미지 같이 이벤트 객체가 console에 출력된다.

📍 SyntheticBaseEvent란?
: 합성 이벤트 객체로 모든 브라우저의 이벤트 객체를 하나의 포맷으로 통일한 형태를 의미
: 여기 안에는 발생한 이벤트의 모든 정보가 담겨져 있다.