이벤트 버블링

기존에 만들었던 게시글 목록 페이지에서

게시글의 제목을 누르면
OOO님이 작성한 글입니다 라는 얼럿이 뜨도록 만들어 보자

title 부분에 onClick로 기능을 만들어보자.

const onClickAlert = (event:any) => {
  alert(event.target.id + "님이 작성한 글입니다.")
}

<span style={myStyles} id={el.writer} onClick={onClickAlert}>{el.title}</span> 

하게되면

간단하게 만들 수 있다
이번엔 제목 뿐 아니라 게시글번호, 작성자를 눌러도 동일한 알람이 뜨도록 해보자

<span style={myStyles} id={el.writer} onClick={onClickAlert}>{el.id}</span>
<span style={myStyles} id={el.writer} onClick={onClickAlert}>{el.title}</span> 
<span style={myStyles} id={el.writer} onClick={onClickAlert}>{el.writer}</span>

각각에 전부 넣어주면 되기는 하는데 코드가 쓸데없이 반복된다.
그러면 세개의 span을 묶고 있는 div에다가 해당 기능을 넣으면 어떻게 될까

<div id={el.writer} onClick={onClickAlert}>
  <span>
  	<input type="checkbox" />
  </span>
<span style={myStyles}>{el.id}</span>
<span style={myStyles}>{el.title}</span> 
<span style={myStyles}>{el.writer}</span>
</div>

작성자명을 제대로 받아왔다 못했다 한다

이벤트 버블링이란

게시글 목록을 보면
파란상자로 감싸져있는 div끼리는 형제 div이고
붉은색은 부모 div가 될것이다.

여기서 문제는 html쪽에서 형제 div내부를 클릭할수도 있고 부모div와 형제div의 사이 공간을 클릭할수도 있다는것.

형제 div를 누르면 형제div만 동작해야할지, 부모div가 동작해야할지, 둘 다 동작해야할지가 애매해짐.

이런것을 해결하기 위한것이 이벤트 버블링

html에서는 자식div를 누르면 부모div에도 클릭이 들어가게됨.

<div id={el.writer} onClick={onClickAlert}>
  <span>
  <input type="checkbox" />
    </span>
<span style={myStyles}>{el.id}</span>
<span style={myStyles} onClick={test}>{el.title}</span> 
<span style={myStyles}>{el.writer}</span>
</div>

이런 코드가 있을 때 title을 클릭하면 test와 onClickAlert 둘 모두 실행이 된다는것.
= 이벤트가 전파되었다 라고함 (Propagation : 전파)

자식에서 부모로 가는것을 이벤트 버블링
반대로 부모에서 자식으로 가는것을 이벤트 캡처링 이라고함

이런식으로 작성을 하고 title부분을 눌러보면

두개의 알람이 연속으로 나오게됨.

그렇기 때문에

부모 div부분은 id값이 지정되어 있기때문에 값이 제대로 출력되지만
형제 div부분은 id값이 비어있기 때문에 값을 가져오지 못하는것.

이런식으로 각각의 span 태그에도 id 값을 넣어주면 정상적으로 출력이 가능함.

근데 이 방법도 결국 똑같은 id값을 반복해서 입력해줘야하니 뭔가 비효율적같음

event.currentTarget

현재 실행중인 이벤트의 값을 가져오는 명령어

다른곳은 수정할 필요 없이 event.target -> event.currentTarget 으로 바꿔주면
해당 기능을 수행하는 곳의 타겟에서 값을 가져오도록 변경된다.
그렇게되면 어디를 클릭해도 정상적인 값이 출력됨.