이벤트 버블링 예제(1)

fieldnight·2024년 2월 1일

github Commits on Jan 28, 2024: feat: 11-0-event-bubbling (08-02 fix)

이벤트 버블링

자식 요소를 클릭 시, 이를 감싼 부모 요소까지 클릭되는 현상을 말한다. 거품이 아래 (자식)에서 위(부모)로 올라가는 모습에서 비롯된 용어이다.

자식 를 클릭했을 경우
부모 자식 둘 다 onClikc 보유한 경우 : 부모와 자식의 onClick이 모두 발동
부모만 onClick 보유한 경우 : 부모의 onClick 발동
자식만 onClick 보유한 경우 : 자식의 onClick 발동

이때의 event.target.id는 실제 클릭이 발생한 곳을 가르키므로 자식의 event를 받아온다.기존의 target은 자식 태그를 우선으로 인식한다.

예제 코드

div 태그 내 어디를 클릭해도 onClickAlert가 발동되게 하자. onClick이 없는 span 태그 부분을 클릭하더라도 부모 태그의 onClick이 발동되어, 클릭이 이루어진 자식 태그의 id가 아닌 부모 태그의 id를 가져오도록 하자.

 const onClickAlert = (event : MouseEvent<HTMLDivElement>) => {
  alert(`${event.currentTarget.id}님이 작성한 글입니다.`);
};

/*TS에서 제네릭을 지원하지 않는 MouseEvent를 사용하여 발생하는 문제:
이벤트 핸들러에서 제대로된 제네릭 타입을 사용하려면 React.MouseEvent를 사용해야 한다. 
혹은 MouseEvent를 react에서 import하면 된다. */

return (
<div>
    {data?.fetchBoards.map((el: any, index) => (
      <div key={el.number} id = {el.writer} onClick={onClickAlert}>

        {/* 맵으로 화면을 그릴 경우 반드시 key를 사용해 세트로 묶어라. 
         리엑트는 맵을 이용 할 경우 자체적으로 효율을 찾는 로직이 실행된다. 
        리엑트의 논리대로면 체크박스가 해당 열 span들과의 연관도가 낮아진다.
        그래서 둘 사이에 고유한 값(겹치지 않는 값)을 key=value로 지정해서 
        react에게 이 둘이 짝임을 알려준다.이 구간은 React JSX 주석 형태이다. */}

        <span><input type="checkbox" /></span>
        <span style={{ margin: "10px" }}>{el.number}번 게시물 </span>
        <span style={myStyles}>제목: {el.title}</span>
        <span style={myStyles} id="writer">작성자: {el.writer}</span>
        <span><button id={el.number} onClick={onClickDelete}>삭제</button></span>
      </div>
  ))}
</div>