합성이벤트란
react에서 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 합성이벤트를 사용한다.
이벤트 핸들러에서 합성이벤트(SyntheticEvent)객체를 전달 받는다.
우리가 합성이벤트를 사용하면 React가 알아서 dom을 조작해준다.
합성 이벤트는 브라우저 고유 이벤트에 직접 대응되지 않으며 다르다.
모든 합성 이벤트객체는 다음 어트리뷰트를 가집니다.
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type차이점
React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사한데 차이점이 있다
1. 캐멀 케이스(camelCase)를 사용
2. 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
<button onclick="activateLasers()">
Activate Lasers
</button><button onClick={activateLasers}>
Activate Lasers
</button>3. 기본동작방지
React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault
를 명시적으로 호출해야 합다.
<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>);
}this
JSX 콜백 안에서 this에 주의해야 합니다. JavaScript에서 클래스 메서드는 기본적으로 바인딩
되어 있지 않다.
이는 React만의 특수한 동작이 아니며, JavaScript에서 함수가 작동하는 방식
의 일부다.
onClick={this.handleClick}
과 같이 뒤에 ()
를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩 해야 합니다.
bind 호출 대신 2가지 사용법
1. 퍼블릭 클래스 필드 문법 사용
cra에서는 이 문법이 기본적으로 설정되어 있다.
2. 콜백에 화살표함수를 사용하는 방법
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
return (
<button onClick={() => this.handleClick()}>
Click me
</button>);
}
}콜백함수 문제점
LoggingButton이 렌더링될 때마다 다른 콜백이 생성된다. 대부분의 경우 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 할 수 있다. 이러한 종류의 성능 문제를 피하고자, 생성자 안에서 바인딩하거나 클래스 필드 문법을 사용하는 것을 권장합니다.
합성이벤트 종류
다음 이벤트 핸들러는 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 Capture를 덧붙이세요. 예를 들어 onClick 대신 onClickCapture를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다.
