const onChange = (e) => {
const {
target: { value },
} = e;
};
event 안의 target안의 value를 잡기
밑에서 value 를 바로 사용가능함.
이건 밑의 코드와 같다.
const value = e.target.value
ㄷㄷ 신기 굳이 왜 첫 번째 방법으로 쓰는지, 그 효용은 잘 모르겠지만
event.target 은 이벤트가 일어나는 장소, event.currentTarget 은 이벤트 핸들러가 부착되어있는 장소
The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.
<button onClick={onLogin}>
<span>naver</span>
</button>
👀 그렇다면 이 코드에서
event.target 은 <span>naver</span> 를 반환하고
event.currentTarget 은 <button> 태그 전체를 반환한다.(안에 있는 span 자식까지도)