[React] html과 리액트의 이벤트 처리 방식 차이점

React에서의 이벤트 처리

html과의 차이점

React 이벤트 이름은 모두 소문자 대신 camelCase를 사용한다.

JSX에 문자열 대신 함수를 전달한다.

 

리액트에서 이벤트 처리방법

1. 컴포넌트에서 DOM이벤트 사용

컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 아래 표의 이벤트 프로퍼티를 사용해야 한다.

이벤트 명	JSX DOM 이벤트 프로퍼티	이벤트 호출 시점
click	onClick	엘리먼트에 마우스나 키보드가 클릭 된 경우
change	onChange	엘리먼트의 내용이 변경된 경우
submit	onSubmit	폼의 데이터가 전송될 때
keydown	onKeyDown	키보드 버튼이 눌린 경우 ( 값 입력전에 발생하며, shift, alt, ctrl 등 특수키에 동작한다. ) (한/영, 한자 등은 인식불가)
keyup	onKeyUp	키보드 버튼이 눌렸다 뗀 경우 ( 값 입력후에 발생하며, onKeyDown 과 동일하게 동작한다. )
keypress	onKeyPress	키보드 버튼이 눌려져 있는 경우 ( 실제 글자가 작성될때 이벤트이며, ASCII 값으로 사용되어 특수키를 인식 못한다.)
focus	onFocus	엘리먼트가 포커스 된 경우
blur	onBlur	엘리먼트가 포커스가 사라진 경우
mousemove	onMouseMove	엘리먼트 위에서 마우스 커서가 움직일 때
mousedown	onMouseDown	마우스 버튼이 클릭되기 시작할 때
mouseup	onMouseUp	마우스 버튼 클릭이 끝날때

 

2. 리액트의 이벤트 문법

• 소문자 대신 카멜케이스를 사용한다.
  • onClick={changename}  x
  • onClick={changeName}  o
• jsx를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
  • onClick="changeName()" x
  • onClick={changeName}  o
  • 만약 onClick={changeName()} 이렇게 함수를 실행문을 넣게 되면 함수가 반환하는 값이 들어가게 된다.
• 함수를 직접 선언하여 사용한다.
  • <div onClick={()=>{setState("클릭됨")}}> 클릭하면 state가 클릭됨으로 바뀜! </div>

 

3.이벤트의 기본동작 방지 처리

리액트에서는 false를 반환해도 기본동작을 방지할 수 없다.

반드시 preventDefault를 명시적으로 호출해야 한다.