리액트 이벤트 핸들러

리액트 내 이벤트 핸들러는

모든 브라우저에서의 동일한 이벤트 처리를 위한

합성 이벤트의 객체를 전달받음

 

합성 이벤트 (Synthetic Event):

모든 브라우저에서 동일한 이벤트 처리를 위한 Wrapper 객체

* Wrapper : 기본기능을 감싸는 새로운 기능을 만드는 것

 

리액트에서 보통 이벤트를 핸들링 할 때

const onClick = (e) => {

      console.log(e);

이렇게 전달받음

 

자주 쓰이는 이벤트 타입

1. Form 이벤트

    1) onclick (click 이벤트)

    엘리먼트의 마우스나 키보드가 클릭 된 경우

    2) onChange (change이벤트)

    엘리먼트의 내용이 변경된 경우

    3) onSubmit (submit 이벤트)

    Form의 데이터가 전송될 때

 

2. Focus 이벤트

모든 React DOM 엘리먼트에서 작동

    1) onFocus (focus 이벤트)

    엘리먼트 (or 자식 엘리먼트)가 포커스 된 경우

    2) onBlur (blur event 이벤트)

    엘리먼트 (or 자식 엘리먼트)에 포커스가 사라진 경우

 

3. Keyboard 이벤트

    1) onKeyDown (keydown 이벤트)

    키보드 버튼이 눌린 경우

        (1) 값 입력 전에 발생

        shift, alt, ctrl등 특수키에만 동작

        한/영/한자 등은 인식하지 못함

    2) onKeyUp (keyup 이벤트)

     키보드 버튼을 눌렀다가 뗀 경우

    3) onKeyPress (keypress 이벤트)

    키보드 버튼이 눌러져 있는 경우

        (1) 실제 글자가 작성될 때 동작하는 이벤트

        (2) ASCII 값으로 사용되어 특수키 인식하지 못함

 

4. Mouse 이벤트

    1) onMouseMove (mousemove 이벤트)

    마우스 커서가 엘리먼트 위에서 움직일 때

    2) onMouseDown (mousedown 이벤트)

    마우스 위에서 클릭이 되기 시작할 때

    3) onMouseUp (mouseup 이벤트)

    마우스 버튼 클릭이 끝날때