onChange 함수를 다음과 같이 정의하고
const onChange = (e) => {
setNumber(e.target.value);
};
input 태그 안에 value와 onChange를 다음과 같이 정의한다.
<input value={number} onChange={onChange} />
input 창에 'ㅇ'이라는 글자를 입력했을 때
onChange 함수가 실행되면서 이벤트 객체를 반환한다.
반환된 이벤트가 onChange 함수에서 실행될 때 받은 인자 e의 객체 구조와
e.target의 구조와
e.target.value의 구조를 보면 아래와 같다.
✔ e의 객체 구조
console.log(e);
//output is
SyntheticBaseEvent {
_reactName: "onChange",
_targetInst: null,
type: "change",
nativeEvent: InputEvent,
target: input,
bubbles: true
cancelable: false
currentTarget: null
defaultPrevented: false
eventPhase: 3
isDefaultPrevented: ƒ
functionThatReturnsFalse()
isPropagationStopped: ƒ
functionThatReturnsFalse()
isTrusted: true
nativeEvent: InputEvent {
isTrusted: true,
data: "ㅇ",
isComposing: true,
inputType: "insertCompositionText",
dataTransfer: null, …}
target: inputtimeStamp: 1090.3649999963818
type: "change"
_reactName: "onChange"
_targetInst: null
proto: Object}
✔ e.target의 구조
이벤트 객체의 target만 가져와서 출력한다. 위 객체에서 target의 value 는 input이기 때문에 다음과 같이 출력된다.
console.log(e.target);
//output is
<input placeholder="할일 입력" value="ㅇ">
✔ e.target.value의 구조
input의 value를 가져오므로 입력한 값인 'ㅇ'을 출력한다.
console.log(e.target.value);
//output is
ㅇ
여러 개의 console.log()를 실행하면서 알게 된 것은
console.log(e.target.value)와
console.log(e.nativeEvent.data)가 같은 값 'ㅇ'을 출력한다는 것이다.
인자로 받는 이벤트 객체 e와 nativeEvent는 과연 무엇인가 궁금증이 들어서
아래 블로그*를 읽어보았다.
//바닐라 자바스크립트에서 HTML DOM 요소에 이벤트 리스너를 추가하는 방법
const para = document.querySelector('p');
para.addEventListener('click', ()=>{
//클릭 이벤트 리스너 동작을 다는 부분
});
바닐라 자바스크립트에서 HTML DOM 요소에 이벤트 리스너를 추가하는 방법은 위와 같고
react는 이벤트를 처리하기 위해 바닐라 자바스크립트와 달리 엘리먼트가 렌더링 될 때 이벤트 리스너를 제공해 이벤트를 처리한다.
syntheticEvent는 pooling되며 성능 상의 이유로 syntheticEvent객체는 재사용되고 모든 속성은 이벤트 핸들러가 호출된 다음 초기화된다. 따라서 비동기적으로 이벤트 객체에 접근할 수 없다.
핵심 : react에서 엘리먼트의 이벤트를 처리하기 위해 제공하는 이벤트 리스너의 인자 e가 매번 초기화된다.
But! 착각하면 안되는 것 : onSubmit 함수가 실행되면서 렌더링이 초기화되는 것을 막기 위해 e.preventDefault();를 추가하는데 위 핵심에서 언급한 초기화되는 문제는 다른 이벤트 객체이기 때문에 e.persist();로 해결할 수 없기 때문이다.
블로그**에 따르면 e.persist()는 onClick, onChange 등에만 사용할 수 있고 렌더링이 초기화되는 것을 해결한다기 보다는 이벤트 객체의 속성값이 null이 되는 문제를 해결하는데 사용된다.
출처 블로그*
출처 블로그**
'JavaScript' 카테고리의 다른 글
21.04.10 switch (0) | 2021.04.14 |
---|---|
21.04.05 map, reduce, concat, parseInt (0) | 2021.04.09 |
21.01.24 자바스크립트에 대해서 (0) | 2021.01.24 |
21.01.16 프로젝트#1 keyframes (0) | 2021.01.17 |
21.01.14 프로젝트#1 파비콘 (2) | 2021.01.15 |