React에서 event 처리에 대하여

1. ReactEventHandling
임광규
2020.ReactJS 1

2. 이벤트사용시주의사항
이벤트이름은카멜표기법으로작성
onclick=>onClick,onkeyup=>onKeyUp
이벤트에실행할자바스크립트코드를전달하는것이아니라함수형태의값을전달
<button onClick={() => {console.log('클릭')}} />
DOM요소만이벤트를설정할수있음
MyComponent에onClick값을설정하면클릭할때실행하는것이아니라전달만함
<MyComponent onClick={doSometing} />
컴포넌ㅌ자체적으로이벤트설정불가단,전달받은props를내부이벤트로설정
<div onClick={props.doSometing}>{/* {...} */}</div>
2020.ReactJS 2

3. React에서지원하는이벤트종류
SyntheticEvent
이벤트핸들러는크로스브라우저래퍼인 SyntheticEvent 를전달받습니다.이벤트는모든
브라우저에서동작하는점을제외하면,기본이벤트와동일한인터페이스를가집니다.
ClipboardEvents CompositionEvents KeyboardEvents FocusEvents
FormEvents GenericEvents MouseEvents PointerEvents
SelectionEvents TouchEvents UIEvents WheelEvents
MediaEvents ImageEvents AnimationEvents TransitionEvents
OtherEvents
2020.ReactJS 3

4. 이벤트사용예시-1
비동기적으로이벤트속성을참조하고싶다면이벤트객체의 event.persist() 를호출하세
요.이벤트풀에서제거되고사용자의코드에서참조가가능해집니다.
function onClick(event) {
console.log(event); // => nullified object.
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);
}
2020.ReactJS 4

5. event.persist()
비동기처리시네이티브이벤트와다르게동작하는이유는,
리액트의SyntheticEvent는 객체 풀링(Object Pooling) 방식을사용하기때문입니다.
매이벤트마다사용되는객체를 Object Pooling 을사용하여 객체 생성 시간을 줄이고 GC에 대한
노출을 줄여서 메모리관리에소비되는시간을줄이는방식을사용합니다.때문에객체가호출되고난
후에이벤트속성이초기화됩니다.
이로인해비동기로호출하였을경우에는해당객체가비어있는현상이발생합니다.
하지만 event.persist() 를호출하게되면사용하고있던이벤트풀(EventPool)에서제거되고
사용자코드로사용이됩니다.
2020.ReactJS 5

6. 이벤트사용예시-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>;
}
2020.ReactJS 6

7. 이벤트사용예시-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>;
}
2020.ReactJS 7

8. 뽀나스
e.stopPropagation(),e.preventDefault()차이
e.preventDefault() 는고유동작을중단시키고, e.stopPropagation() 는상위엘리먼트들
로의이벤트전파를중단시킨다.
2020.ReactJS 8

9. 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");
});
2020.ReactJS 9

10. 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"
);
}
}
}
2020.ReactJS 10

11. 참고자료
SyntheticEvent
[개념잡기]e.preventDefault()와stopPropagation()의차이
2020.ReactJS 11