ReactJS event handling
임광규
이벤트 사용시 주의 사항
- 이벤트 이름은 카멜 표기법으로 작성
- onclick => onClick, onkeyup => onKeyUp
- 이벤트에 실행할 자바스크립트 코드를 전달 하는 것이 아니라 함수 형태의 값을 전달
<button onClick={() => {console.log('클릭')}} />
- DOM 요소만 이벤트를 설정 할수 있음
- MyComponent에 onClick 값을 설정하면 클릭할때 실행하는 것이 아니라 전달만 함
<MyComponent onClick={doSometing} />
- 컴포넌트 자체적으로 이벤트 설정 불가 단, 전달받은 props를 내부 이벤트로 설정
<div onClick={props.doSometing}>{/* {...} */}</div>
- MyComponent에 onClick 값을 설정하면 클릭할때 실행하는 것이 아니라 전달만 함
React에서 지원하는 이벤트 종류
SyntheticEvent
이벤트 핸들러는 크로스브라우저 래퍼인
SyntheticEvent를 전달 받습니다. 이벤트는 모든 브라우저에서 동작하는 점을 제외하면, 기본이벤트와 동일한 인터페이스를 가집니다.
이벤트 사용 예시-1
비동기적으로 이벤트 속성을 참조하고 싶다면 이벤트 객체의
event.persist()를 호출하세요. 이벤트 풀에서 제거되고 사용자의 코드에서 참조가 가능해집니다.
function onClick(event) {
console.log(event); // => Event Class.
console.log(event.type); // => "click"
const eventType = event.type; // => "click"
setTimeout(function() {
// 만약 event.persist(); 를 호출했다면 null 이 아님
console.log(event.type); // => null
console.log(eventType); // => "click"
}, 0);
}
event.persist()
비동기 처리시 네이티브 이벤트와 다르게 동작하는 이유는,
리액트의 SyntheticEvent는 객체 풀링(Object Pooling) 방식을 사용하기 때문입니다. 매 이벤트마다 사용되는 객체를 Object Pooling을 사용하여 객체 생성 시간을 줄이고 GC에 대한 노출을 줄여서 메모리관리에 소비되는 시간을 줄이는 방식을 사용합니다. 때문에 객체가 호출되고 난 후에 이벤트 속성이 초기화 됩니다.
이로 인해 비동기로 호출하였을 경우에는 해당 객체가 비어있는 현상이 발생합니다.
하지만 event.persist()를 호출하게되면 사용하고 있던 이벤트 풀(Event Pool) 에서 제거되고 사용자 코드로 사용이 됩니다.
이벤트 사용 예시-2
state에 input 값 담기
import React from 'react';
export default () => {
const [name, setName] = React.useState("");
return <div>
<input type="text" name="name" value={name} onChange={e=>setName(e.target.value)}>
</div>;
}
이벤트 사용 예시-3
여러개의 input 관리
import React from 'react';
export default () => {
const [state, setState] = React.useState({name:"", age:""});
const handleChange = (e) => {
setState({
...state,
[e.target.name]: e.target.value // 이부분이 핵심!
});
}
return <div>
<input type="text" name="name" onChange={handleChange}>
<input type="text" name="age" onChange={handleChange}>
</div>;
}
뽀나스
e.stopPropagation(), e.preventDefault() 차이
e.preventDefault()는 고유 동작을 중단시키고, e.stopPropagation() 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.
e.stopPropagation()
<div class="first-cover">
<ul class="second-cover">
<li class="third-cover">
<div class="last-el">event</div>
</li>
</ul>
</div>
$(".last-el").click(function(e){
e.stopPropagation();
alert("last-el");
});
$(".third-cover").click(function(){
alert("third-cover");
});
$(".second-cover").click(function(){
alert("second-cover");
});
e.preventDefault()
preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막음
<input type="text" onkeypress="checkName(event);"/>
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
alert("소문자만 입력할 수 있습니다." + "\n"
+ "charCode: " + charCode + "\n"
);
}
}
}