[React 기초] Event 2. 리액트에서 이벤트 처리하기

*DOM 엘리먼트에서의 이벤트 처리 방식과 차이점

1. 카멜케이스 문법을 사용한다.
- DOM의 경우 onclik, oninput 과 같이 모두 소문자(ex. onclick, oninput)로 입력하여 이벤트를 처리하였다. 하지만 리액트에서는 lowerCamelCase 형태(ex. onClick, onInput)로 입력한다. 
 
2. 이벤트 핸들러를 JSX 문법의 함수로 전달한다.(ex. onClick={addNumber})
- DOM의 의 경우 문자열(ex. onclick="addNumber()")로 이벤트 핸들러를 전달하였다.
 
 
 
 

*리액트에서 지원하는 이벤트 종류

1. onClick
- 요소를 클릭하는 경우
 
2. onChange
- 주로 input 요소에서 사용, input 값에 변화가 생길 경우
 
3. onInput
- onChange와 거의 유사
 
4. onFocus
- 주로 input 요소에서 사용, input 칸이 포커싱 되었을 경우(클릭해서 입력하라고 깜빡일 때)
 
5. onMouseEnter
- 마우스를 요소에 올릴 경우
 
6. onMouseLeave
- 마우스를 요소에 올리고 있다가 뗄 경우
 
 
 
 
 
 
 
이 외에도 이벤트가 더 많다. --> 더 많은 리액트 이벤트 종류 참고 링크!

나도 숭늉 링거 맞고싶다