Event

이벤트란 단어 그대로 "사건"을 말하는데, 사용자의 행동으로 인해 발생하는 DOM 요소의 변경이 일어나는 인터랙션을 말한다. 쉽게 말해 클릭이나 값 입력 처럼 기존의 DOM 요소에서 어떠한 변경이 일어나는 것을 모두 이벤트라고 말한다.

특정 이벤트가 발생하면 어떻게 처리할것인지를 개발자가 코드로 구현하며, 이 코드로 구현한 처리 함수를 바로 이벤트 핸들러 라고 하고, 이벤트 핸들러 안에서 이벤트의 정보를 담아 사용 되는 객체가 바로 이벤트 객체 e 이다.

// 사용자가 입력할때 발생하는 change 이벤트의 정보를 담은 이벤트객체 e 를 사용하는 이벤트 핸들러 함수이다.
const handleChange = (e:ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
}

Event Bubbling

브라우저에서 이벤트가 발생하게 되면, 이벤트가 발생한 요소의 최상위 요소까지 이벤트를 전파시키는데 이것을 바로 이벤트 버블링이라고 한다.

const Parent = () => {
    const handleClick = () => {
        console.log('부모 컴포넌트 클릭')
    }
    return (
        <div onClick={handleClick}>
            <h1></h1>
            <Child />
        </div>
    )
}

const Child = () => {
    const handleClick = (e) => {
        // e.stopPropagation();
        console.log('자식 컴포넌트 클릭')
    }
    return <button onClick={handleClick}>자식 컴포넌트 버튼</button>
}

위 코드는 리액트를 사용해 간단한 이벤트 버블링을 구현한 예시이다. 자식컴포넌트인 버튼을 클릭하게 되면 "자식 컴포넌트 클릭" 이라는 로그와 함께 부모 컴포넌트를 클릭했을때 발생하는 이벤트 핸들러 함수도 같이 실행된다. 만약 이벤트 버블링을 막으려면 주석처리가 되어있는 e.stopPropagation() 을 사용하여 전파를 막을수 있다.

Event Capturing

이벤트 캡처링은 버블링과 반대로 최상위 요소에서 이벤트가 발생한 요소를 탐색해 내려가는 것을 말한다.

const Parent = () => {
  const handleCaptureClick = () => {
    console.log('부모 컴포넌트의 클릭 이벤트가 캡처링되었습니다.');
  };

  return (
    <div onClickCapture={handleCaptureClick}>
      부모 컴포넌트
      <Child />
    </div>
  );
};

const Child = () => {
  const handleClick = () => {
    console.log('자식 컴포넌트의 클릭 이벤트가 버블링되었습니다.');
  };

  return <button onClick={handleClick}>자식 컴포넌트 버튼</button>;
};

버블링의 예시와는 다르게 부모 컴포넌트의 div 요소에 onClickCapture 라는 속성을 사용해 캡처링 이벤트 핸들러를 등록했다. 이후 버튼을 클릭하게 되면 자식 요소까지 캡처링 된 후 , 다시 버블링되어 부모 컴포넌트까지 이벤트가 전파된다.

Event Delegation

이벤트 위임은 상위 요소에서 하위 요소의 이벤트들을 제어하는 것을 말한다. 쉽게 말해 공통의 상위 요소에서 하위 요소의 이벤트를 다루는 것이다.

const Parent = () => {
  const handleClick = (event) => {
    const target = event.target;
    if (target.classList.contains('child1')) {
      console.log('첫 번째 자식이 클릭되었습니다.');
    } else if (target.classList.contains('child2')) {
      console.log('두 번째 자식이 클릭되었습니다.');
    } else if (target.classList.contains('child3')) {
      console.log('세 번째 자식이 클릭되었습니다.');
    }
  };

  return (
    <div onClick={handleClick}>
      부모 컴포넌트
      <Child1 />
      <Child2 />
      <Child3 />
    </div>
  );
};

const Child1 = () => {
  return <button className="child1">첫 번째 자식 컴포넌트 버튼</button>;
};

const Child2 = () => {
  return <button className="child2">두 번째 자식 컴포넌트 버튼</button>;
};

const Child3 = () => {
  return <button className="child3">세 번째 자식 컴포넌트 버튼</button>;
};

위 코드처럼 여러 자식을 가지고 있을때, 자식들의 클릭이벤트를 공통된 부모에서 관리하는 것을 말한다.