e.target.value

이벤트 함수를 사용하다보면 e.target.value가 자주 보이는데, 그게 정확히 무엇인지 정리해본다.

onChange 함수 정의

  const onChange = (e) => {
    setNumber(e.target.value);
  };

input 태그 안에 설정한 onChange 함수 사용

<input value={number} onChange={onChange} />

input 창에 'ㅇ'이라는 텍스트를 입력했을 때,
반환된 이벤트가 onChange 함수에서 실행될 때 받은 인자 e의 객체 구조와e.target의 구조, e.tartget.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
ㅇ