[React] React의 이벤트 핸들러

 

 

이벤트 핸들링은 사용자의 상호작용에 대응하기 위해 필수적이다. 사용자가 버튼을 클릭해서 API 요청을 하거나, 여러 동적인 동작을 발생시키기 위해 이벤트를 사용하는데, React에서 이벤트는 SyntheticEvent 라는 객체로 감싸져서 제공된다. SyntheticEvent는 브라우저의 네이티브 이벤트를 감싼 React의 크로스 브라우저 호환성을 제공하는 래퍼이다. 

SyntheticEvent는 브라우저간의 일관성을 유지하면서 React 이벤트 시스템을 추상화한다. 이벤트 핸들러는 이 SyntheticEvent객체를 매개변수로 받아서 사용한다. 이렇게 브라우저 이벤트를 감싼 SyntheticEvent는 이벤트의 표준 속성들을 대부분 사용할 수 있다.

 

1.  함수형 컴포넌트 JSX 내에서 이벤트 함수 전달

   import React from 'react';

   function MyComponent() {
     const handleClick = (event) => {
       // event는 SyntheticEvent 객체이다.
       console.log('버튼이 클릭되었습니다.');
     };

     return (
       <button onClick={handleClick}>
         클릭하세요
       </button>
     );
   }

   export default MyComponent;

 

위의 예시에서는 onClick 속성을 사용하여 버튼 클릭 이벤트를 처리하고, 해당 이벤트가 발생했을 때 호출되는 함수인 handleClick`정의한 것을 보여준다. 버튼 컴포넌트를 클릭하면 콘솔로그가 실행될 것이다.

React에서는 DOM 엘리먼트에서 이벤트를 처리하는 것처럼 click, mouseover, blur 등 다양한 이벤트를 처리 할 수 있는데 기명하는 방식이 조금 다르다 React 컴포넌트에 on 접두어로 시작하는 이벤트를 정의하면 되는데 onChange, onMouseOver 등 처럼 표현한다.

참고로, 함수를 이벤트 핸들러로 전달할 때에는 함수를 호출하는 것이 아니라, 함수 자체를 전달해야 한다. 따라서 onClick={handleClick()}와 같이 호출하면 안되고 onClick={handleClick}와 같이 호출하지 않은 상태로 전달해야 한다.

 

2. React에서 주로 사용되는 몇 가지 이벤트 핸들러

1) onClick
마우스로 해당 요소를 클릭했을 때 발생하는 이벤트를 처리

2) onChange
input 요소들 (input, selectbox, textarea) 등의 값이 변경될 때 발생하는 이벤트를 처리

3) onSubmit
form 요소에서 제출(submit) 버튼을 눌렀을 때 발생하는 이벤트를 처리

4) onMouseOver, onMouseOut
요소에 마우스가 올라가거나 나갈 때 발생하는 이벤트를 처리

5) onKeyDown, onKeyPress, onKeyUp
키보드의 키 다운, 키 눌림, 키 업 이벤트를 처리

6) onFocus, onBlur
요소가 포커스를 얻거나 잃었을 때 발생하는 이벤트를 처리

7) onLoad, onError
이미지나 다른 외부 리소스가 로드되거나 에러가 발생했을 때 발생하는 이벤트를 처리

8) onScroll
요소가 스크롤될 때 발생하는 이벤트를 처리

9) onDragStart, onDragOver, onDrop
드래그 앤 드롭 동작과 관련된 이벤트를 처리