21.04.05 e.target.value에 대한 탐구

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이 되는 문제를 해결하는데 사용된다. 

 

 

출처 블로그*

medium.com/react-native-seoul/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%B2%98%EC%9D%8C%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-06-%ED%95%A9%EC%84%B1-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%99%80-event-pooling-6b4a0801c9b9

[React] 리액트를 처음부터 배워보자. — 06. 합성 이벤트와 Event Pooling

 

출처 블로그**

ipex.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EC%9D%B4%EB%B2%A4%ED%8A%B8-epersist-aka-SyntheticEvent-If-you-must-keep-the-original-synthetic-event-around-use-eventpersist

[React] 리액트의 이벤트 e.persist ( aka SyntheticEvent) If you must keep the original synthetic event around, use event.