[React] e.target.value라고 써야하는 이유가 뭐야? 그냥 e라고 쓰면 안됨?

결론 : ㅇㅇ 안됨.

---

투두 리스트를 만들고 있었다.

<input className={styled.todoInput} type="text" 
            placeholder='오늘 할 일은?'
            value={value}
            onChange={inputChange}/>

이렇게 작성하고,

inputChange함수를 작성하는데

문득,

const inputChange = (e) => {
  setValue(e);
};

이건 왜 안됨? 이라는 궁금증이 생겼다.

 

e와 e.target.value의 차이

이벤트 객체(e)와 그 객체 안의 특정 값(value)을 사용하는데서 차이가 있다.

 

1. e

e는 이벤트 객체 전체를 의미

콘솔창에 찍어보았을 때,

위와 같은 결과가 뜬다.

객체인것이다.

 

2. setValue(e.target.value)

이 친구를 콘솔창에 찍어보았을때

내가 입력한 값이 뜬다.

 

그럼 target은 뭐야. 왜 저렇게써

target은 이벤트 객체(e)의 속성으로, 이벤트가 발생한 HTML 요소를 참조한다.

그래서 input을 참조할 수 있는것이다.

 

그냥 e.value라고 쓰면 안돼?

안된다. e는 이벤트 객체인데, 이벤트 객체에는 value라는 속성이 존재하지 않기 때문이다.

 

우리는 e.target의 속성을 사용하고 있는것이다.

아래는 e.target의 속성들이다.

value

입력 요소의 현재 값 (<input>, <textarea>에서 사용)

id	HTML 요소의 id 속성

name	HTML 요소의 name 속성

className

HTML 요소의 class 속성

tagName

HTML 요소의 태그 이름 (예: INPUT, BUTTON)

checked

체크박스나 라디오 버튼이 선택되었는지 여부

innerText

HTML 요소 내부의 텍스트

attributes

HTML 요소의 모든 속성

 

-끝-