이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent
객체를 전달받습니다
https://ko.reactjs.org/docs/events.html#gatsby-focus-wrapper
React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도록 표준화합니다.
다음 이벤트 핸들러는 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 Capture
를 덧붙이세요. 예를 들어 onClick
대신 onClickCapture
를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다.
버블링 : 부모로 계속 전달해주는 것
캡쳐링 : 부모가 내자식들에게 누가 클릭이 됬는가를 확인하는 캡쳐 과정
캡쳐링 한 후에, 버블링이 일어난다.
import React from 'react';
export default function Event() {
const handleButtonClick = () => {
console.log('handleButtonClick');
};
const handleClickCapture = () => {
console.log('handleClickCapture');
};
const handleClickCapture2 = () => {
console.log('handleClickCapture2');
};
const handleClickBubble = () => {
console.log('handleClickBubble');
};
return (
<div onClickCapture={handleClickCapture}>
<div onClickCapture={handleClickCapture2} onClick={handleClickBubble}>
<button onClick={handleButtonClick}>Button</button>
</div>
</div>
);
}
결과:
handleClickCapture
handleClickCapture2
handleButtonClick
handleClickBubble
import React from 'react';
export default function Event() {
const **handleButtonClick** = (e) => {
**console.dir(e); //** handleButtonClick 의 이벤트 확인 가능
console.log('handleButtonClick');
};
const **handleMouseLeaveClick** = (e) => {
console.**dir**(e); // onMouseLeave 의 이벤트 확인 가능
console.log('handleMouseLeaveClick');
};
const handleClickCapture = () => {
console.log('handleClickCapture');
};
const handleClickCapture2 = () => {
console.log('handleClickCapture2');
};
const handleClickBubble = () => {
console.log('handleClickBubble');
};
return (
<div onClickCapture={handleClickCapture}>
<div onClickCapture={handleClickCapture2} onClick={handleClickBubble}>
<button
onClick={handleButtonClick}
onMouseLeave={handleMouseLeaveClick}
>
Button
</button>
</div>
</div>
);
}
결과 :
nativeEvent : { type : "mouseout" }
안에 있는 요소는 다를 수 있지만, 리액트가 관리 하고 있다는 것을 알 수 있음.
https://ko.reactjs.org/docs/handling-events.html
예를 들어, HTML은 다음과 같습니다.
<button onclick="activateLasers()">
Activate Lasers
</button>
React에서는 약간 다릅니다.
<button onClick={activateLasers}>
Activate Lasers
</button>
또 다른 차이점으로, React에서는 false
를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault
를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다.
<form onsubmit="console.log('You clicked submit.'); return **false**">
<button type="submit">Submit</button></form>
React에서는 다음과 같이 작성할 수 있습니다.
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>);
}
여기서 e
는 합성 이벤트입니다. React는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없습니다. React 이벤트는 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않습니다. 더 자세한 사항은 [합성 이벤트](https://ko.reactjs.org/docs/events.html)
을 참고하시기 바랍니다.
...
루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적입니다. 예를 들어, id
가 행의 ID일 경우 다음 코드가 모두 작동합니다.
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
위 두 줄은 동등하며 각각 화살표 함수와 [Function.prototype.bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
를 사용합니다.
두 경우 모두 React 이벤트를 나타내는 e
인자가 ID 뒤에 두 번째 인자로 전달됩니다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind
를 사용할 경우 추가 인자가 자동으로 전달됩니다.
합성이벤트 → 인터페이스는 같지만 직접 대응되지 않음
매우 유사하다 ( 같지는 않음 )
Synthetic Event 라는 wrapper 로 구성 되어있다.
그 안에 nativeEvent 있으니까, 이벤트 종류 등 필요하면 꺼내 써라.
Bubble / Capture → Capture > target > Bubble
버블링 : 부모로 계속 전달해주는 것
캡쳐링 : 부모가 내자식들에게 누가 클릭이 됬는가를 확인하는 캡쳐 과정
* 캡쳐링 / 버블링 순서
handleClickCapture
handleClickCapture2
handleButtonClick
handleClickBubble
retrun false → e.preventDefault( ) 해줘야 함