e.stopPropagation()

propagtion의 사전적 의미는 전파 확장이라는 뜻이다. event.stopPrapagtion은 전파를 막는다는 의미이다.
사용자가 마우스로 어떤 버튼을 클릭했을때 버튼만 반응했다고 생각하기 쉽다. 하지만 사실 버튼만 반응한 것이 아니라 버튼의 부모 태그들 또한 클릭에 반응한 것이다. 이러한 현상을 이벤트 버블링이라고 한다.

const Item = () => {
  const [isFavorite, setIsFavorite] = useState(false);
  
  const toggleIsFavorite = () => {
    setIsFavorite(!isFavorite);
  };

  const navigate = () => {
    navigation(`/어떤페이지`);
  };

  return (
    <li onClick={navigate}>
      <span>ㅎㅇㅎㅇ</span>
      <svg onClick={toggleIsFavorite} />
    </li>
  );
};

export default Item;

이런 React 코드가 있다. svg를 클릭했을때 isFavorite이라는 상태값을 변화시키고 싶다. 하지만 이 상태에서는 상태값이 변하지 않고 navigate라는 onClick 이벤트가 실행될 것이다.

만약 li의 요소 중에서 svg가 아닌 다른걸 클릭 했을때에만 라우트를 시키고 svg를 클릭했을 때에는 상태값을 변화시키고 싶다면 어떻게 해야 할까?
이때 사용하는 것이 e.stopPropagation이다. e.stopPropagation은 부모 태그로의 이벤트 전파를 막아준다. svg에서 동작한 onClick 이벤트가 부모 태그인 li로 전파되지 않기 때문에 navigate 함수는 동작하지 않는 것이다.