[TIL] 리액트 이벤트타겟 타입, Input의 Change Event속성, 이벤트 버블링

 

 

리액트의 속성은 부모 컴포넌트에서 자식 컴포넌트 쪽으로 전달되는 객체 타입의 데이터

객체지향 프로그래밍의 속성 + 재렌더링을 의미하는 객체타입 변수

 

 

이벤트타겟 타입

 

---

 

위 그림과 같이 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받는다.

(출처 : 모던 자바스크립트 Deep Dive)

 

 

즉 모든 HTML요소는 EventTarget타입이 정의하는 속성과 메서드를 포함하고 있다.

 

EventTarget은 addEventListener, removeEventListener, dispatchEvent 메서드 3개를 제공 

 

 

 

리액트 컴포넌트의 매개변수 이벤트속성 타입

---

리액트 컴포넌트의 이벤트 속성에 설정하는 콜백함수는

매개변수 e의 타입이 Event가 아니라 SyntheticEvent타입을 설정해야함 

 

 

DispatchEvent

SyntheticEvent 

 

 

SyntheticEvent 의 타입 선언

interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, Event-Target & T, EventTarget> {}

 

 

BaseSyntheticEvent 타입 선언

 

interface BaseSyntheticEvent<E = object, C = any, T = any> {
  nativeEvent: E;
  currentTarget: C;
  target: T;
  preventDefault(): void;
  stopPropagation(): void;
}

 

*nativeEvent는 물리 DOM에서 발생하는 Event의 세부타입인

PointerEvent와 같은 이벤트 객체를 저장하는데 사용

 

 

 

 

EventTarget의 dispatchEvent메서드

---

 

 

Event타입 객체 만들기

 

new Event('click', {bubbles:true})

 

 

타깃 DOM객체의 dispatchEvent메서드 호출하여 이벤트 발생시키기

 

타깃_DOM_객체.dispatchEvent(new Event('click', {bubbles: true}))

이렇게 하면 프로그래밍으로 발생시킨 것이라도 똑같은 이벤트가 발생하게 되고, 

isTrusted속성만 false로 바뀌게 되는 것을 알 수 있다. 

 

 

이벤트 버블링

---

자식요소에서 발생한 이벤트가 가까운 부모요소에서 가장 먼 부모요소까지 전달되는 현상 

 

(target : 이벤트를 발생시킨 DOM요소, currentTarget: 이벤트 핸들러가 바인딩된 DOM요소)

이벤트가 버블링 되면 버블링 된 곳에서는 currentTarget이 null이 아닌값

이벤트가 발생된 DOM요소에서는 currentTarget이 null인 값

 

stopPropagation으로 이벤트 버블링을 멈추게 함

 

 

Input의 Change Event 속성

---

interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
  target: EventTarget & T;
}

 

SyntheticEvent에 target이란 이름의 속성을 추가한 타입

 

 

 

import type {ChangeEvent} from 'react'

export default function OnChange() {
  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log('onChange', e.target.value)
  }
  return <input type="text" onChange={onChange} />
}

 

이렇게 하면 HTMLInputElement타입의 물리 DOM객체값을 e.target형태로 얻을 수 있게 됨

 

 

 

 

input 요소의 이벤트 관련 속성들

---

 

input 요소가 제공하는 속성들은 React.InputHTMLAttributes<HTMLInputElement>형태로 얻을 수 있음

 

input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, 
HTMLInputElement>;