이벤트 핸들링

리액트에서의 이벤트 핸들링은 기존의 HTML 이벤트를 기반으로 만들어졌기 때문에 HTML 이벤트와 명칭과 사용법이 유사하다.

리액트에서의 이벤트명칭은 camleCase로 되어있다. onclick -> onClick

 

리액트의 이벤트 핸들러는 이벤트 객체를 따로 지정해주지 않아도 인자로 전달해준다.

const handleClick = (event) => {
  console.log(event.target);
};

<button onClick={(e)=>handleClick(e)}>Click me</button>
<button onClick={handleClick}>Click me</button>

 

 

이벤트의 흐름

 

1. 캡처링 단계 (Capturing Phase)

이벤트가 발생하면 가장 바깥요소 부터 시작하게 된다.

window → document → html → body → ... → (이벤트 타깃 요소) → ... → body → html → document → window

이벤트가 실제 클릭된 요소까지 내려가는 단계를 의미한다.

addEventListener(type, handler, false)

• 기본값
• 버블링 단계에서 실행됨
  → 이벤트가 타깃에서 부모 방향으로 올라가는 시점에 실행됨

addEventListener(type, handler, true)

• 캡처링 단계에서 실행됨→ 이벤트가 window → document → html → body → ... → 타깃 으로 내려가는 시점에 실행됨

우선순위 제어를 위해서 사용

 

2. 타겟 단계 (Target Phase)

이벤트가 실제로 존재하는 요소

해당 단계에서 갭처링/버블링 가능

 

3. 버블링 단계 (Bubbling Phase)

타겟 단계에서 다시 부모 방향으로 올라가는 단계

대부분의 이벤트 핸들러는 버블링 단계에서 동작한다

 

 

 

SyntheticEvent(합성이벤트)

SyntheticEvent는 리액트가 모든 브라우저에서 동일하게 이벤트를 사용할 수 있도록 만든,

DOM 이벤트의 일관된 추상화 객체로, React의 이벤트 위임 및 렌더링 시스템의 핵심 기반이다.

 

모든 브라우저에서 동일한 API와 속성을 제공함. (IE...ㅂㄷㅂㄷ)

 

SyntheticEvent의 생명주기(React 17 이후)

1. 이벤트 발생 → 리액트 루트에서 이벤트 감지
2. 리액트가가 브라우저 이벤트를 기반으로 SyntheticEvent 생성
3. SyntheticEvent를 사용자 핸들러에 전달
4. 이벤트 처리가 끝나면 이벤트 객체는 GC 대상이 됨
   → 더 이상 비워지거나 풀링되지 않음

SyntheticEvent에 없는 이벤트일 경우 Ref + DOM 을사용해서 이벤트를 직접 등록할 수 있다.

useEffect(() => {
  btnRef.current.addEventListener("click", () => {})
}, []);

<button ref={btnRef} />

Ref를 사용해서 이벤트를 직접 등록할 경우 기존 리액트와 별개로 DOM API로 이벤트가 전파되는 채널이 달라진다.

 

 

이벤트 전파 제어

event.stopPropagation()

이벤트는 자식-> 부모 순서대로 전파되는데, 이벤트 엘리먼트가 겹쳐질 경우 의도하지 않게 동작할수 있어서

이를 방지하고자 사용한다.

const handleParentClick = () => alert("Parent clicked");
const handleChildClick = (e) => {
  e.stopPropagation();
  alert("Child clicked");
};
    
<div onClick={handleParentClick}>
  <button onClick={handleChildClick}>Click Me</button>
</div>

 

event.stopImmediatePropagation()

이벤트의 형제, 부모에 걸려있는 다른 이벤트 동작 중단.

(리액트의 SyntheticEvent 에는 없는 동작 리액트는 동일 DOM 요소에서 여러 핸들러를 등록하는 방식이 아닌, 합성 이벤트 시스템(SyntheticEvent)으로 일원화된 구조이기 때문)

 

event.preventDefault()

이벤트 전파 및 버블링을 중단시키는게 아닌 HTML 요소의 기본 동작을 막음

<from> submit 동작시 새로고침을 방지, <a> 링크 클릭시 페이지 이동 방지

 

event.nativeEvent.stopPropagation()

리액트는 SyntheticEvent(합성이벤트)를 래핑하여 실제 DOM API 이벤트를 중계하여 제어하는 방식을 채택하고있는데,

특수한경우에 실제 DOM 자체의 이벤트 전파를 막을수있는 (최종버튼?) 장치를 만들어놓음