React
목차
- 리액트에서 이벤트 다루는 방법
- 이벤트 처리(핸들링) 방법
- 이벤트의 기본동작 방지 처리
1. 리액트에서 이벤트 다루는 방법
: React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사함
- React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달
2. 이벤트 처리(핸들링) 방법
: 이벤트를 실행할 코드를 그대로 전달하는 것이 아니라 아래 onClick처럼 함수의 형태로 객체를 전달함
- 핸들링 함수 선언
- 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법
- 익명 함수로 처리
- 이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법
- 이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법
- 많이 쓰이는 DOM 이벤트
- onClick : Element를 클릭했을 때
- onChange : Element의 내용이 변경되었을 때(input의 텍스트를 변경, 파일 선택 등)
- onKeyDown, onKeyUp, onKeyPress : 키보드 입력이 일어났을 때
- onDoubleClick : Element를 더블 클릭했을 때
- onFocus : Element에 Focus 되었을 때
- onBlur : Element가 Focus를 잃었을 때
- onSubmit : Form Element에서 Submit 했을 때
3. 이벤트의 기본동작 방지 처리
- React에서는 false를 반환해도 기본 동작을 방지할 수 없음
- 반드시 preventDefault를 명시적으로 호출해야함
출처