이벤트 핸들링(Event Handling)

 

 

이벤트 핸들링(Event Handling)

: 웹 내부에서 발생하는 사용자의 행동

(ex. 클릭, 입력, 스크롤 등)

 

📌 onClick

: 클릭 시 행동하는 함수

 

case 1.

버튼 태그 안에 바로 함수 작성

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

 

 

 

case 2.

변수에 저장 후 함수명만 사용

• onClick엔 함수 이름만 설정해야 함 (onClickButton() 👉 ❌)

const onClickButton = () => {
   console.log(text);
}

<button 
    onClick={onClickButton}
</button>

 

 

 

 

 

 

📌 onChange

: 값이 변경되고 포커스를 잃을 때 발생하는 이벤트

• 값이 변경된 직후 ❌
• react에선 oninput과 똑같다.

 

 

 

📌 onInput

: 값이 바뀔 때마다 발생하는 이벤트

• react에선 onChange 똑같다.

 

 

 

📌 onMouseEnter

: 마우스를 올리면 행동하는 함수

 

 

 

📌 이벤트 객체(e)

: 이벤트 핸들러 함수의 매개변수로 이벤트 객체를 제공

 

📌 합성 이벤트 (SyntheticBaseEvent)

: 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태

 

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트

 

[React] onChange와 onInput의 차이

 

[javascript] 변경 감지 이벤트 onchange, oninput 차이