[js] 이벤트 버블링 막기 => e.stopPropagation();

이벤트 버블링이란?

- HTML 요소에서 발생한 이벤트가 부모 요소로 전파되는 과정

- 특정 요소에서 이벤트가 발생하면, 그 이벤트는 해당 요소부터 시작해서 가장 상위 요소(즉, document 또는 window)까지 차례로 전달되는 것

 

이벤트 버블링 발생 중인 코드 👇

function Div({ index, 구이름, like, setLike }){
  const likeCount = () => {
    setLike((prevLikes) => {
      const updateLikes = [...prevLikes];
      updateLikes[index] = updateLikes[index] + 1;
      return updateLikes;
    })
  };
  return(
    <>
      <div style={{ marginTop: '10px' }} onClick={() => { console.log(5); }}>
        <span>{구이름[index]}</span>
        <button onClick={likeCount}>💙 <span>{like}</span></button>
      </div>
    </>
  )
}

 

위에 코드를 예를 들자면

💙가 있는 button을 클릭 하면 상위 부모인 div도 클릭되는 셈!

=> 그래서 div의 console.log(5)도 함께 찍힌다. (이게 이벤트 버블링)

 

결과 👇

 

 

이벤트 버블링 개선 코드 👇

function Div({ index, 구이름, like, setLike }){
  const likeCount = (e) => { ✅
    e.stopPropagation(); ✅
    setLike((prevLikes) => {
      const updateLikes = [...prevLikes];
      updateLikes[index] = updateLikes[index] + 1;
      return updateLikes;
    })
  };
  return(
    <>
      <div style={{ marginTop: '10px' }} onClick={() => { console.log(5); }}>
        <span>{구이름[index]}</span>
        <button onClick={likeCount}>💙 <span>{like}</span></button>
      </div>
    </>
  )
}

 

결과 👇

 

console이 찍히지 않는다!