6.1.1 캡처 및 버블링 단계

앞서 언급한 것처럼, React는 명령형이 아니라 선언형 스타일이므로 객체를 조작할 필요가 없고, jQuery처럼 $('.btn').click(handleSave) 같은 방식으로 이벤트를 등록하지 않는다. 대신에 onClick={handleSave}처럼 JSX에 속성으로 이벤트를 선언한다. 마우스 이벤트를 선언한다면 속성의 이름은 표 6-1에 정리된 이벤트 중 하나를 사용한다. 속성 값에는 이벤트 핸들러를 전달한다.

예를 들어 마우스오버 이벤트를 정의하려면 다음 예제 코드처럼 onMouseOver를 사용할 수 있다. 붉은 외곽선이 있는 <div>에 마우스 커서를 옮기면 “mouse is over”라는 문구를 개발자 도구 콘솔에서 확인할 수 있다.

<div
  style={{border: '1px solid red'}}
  onMouseOver={()=>{console.log('mouse is over')}} >
      Open DevTools and move your mouse cursor over here
</div>