TIL | 버블버블~ e.stopPropagation() vs e.preventDefault()

[25.02.07 금요일]

개인과제 5일차.

기능 구현들은 다 완성을 하였다!!
세부사항들을 다듬고, 코드를 다시 확인하고 스타일정리를 하면서
예상하지 않은 부분이 발생!

🫧 버블버블?

ui요소를 클릭하면 다른페이지로 넘어가도록 구현을 한 기능 중에서 array.map()을 사용하여 그려주는 부분이 있어 그 묶음 들을 li태그로 묶어 줬는데, 시멘틱 요소를 고려하면 <li> → <a>로 구현해주는게 좋겠다는 조언으로 수정하였다.

리액트를 이용하여 구현을 하는 중이었기 때문에 <Link>로 변경해주었다.
기존에 있던 코드에서 태그명만 바꿔주었기 때문에 다른 문제는 생기지 않을 것이라 예상했으나, 버블링이 발생한것이다.
구조 자체가 버블링이 생길수 밖에 없는 구조이긴 하나, 이미 그 전에 이벤트 버블링을 방지용으로 event.stopPropagation()를 넣어준 상태였다. 🤔

• 이벤트 버블링 발생한 코드

const PokemonCard = ({ data }) => {
  const dispatch = useDispatch();

  const navigate = useNavigate();
  const goToPokemonDetail = () => {
    navigate(`/dex/detail?id=${data.id}`);
  };

  const handleAddPokemon = (e) => {
    e.stopPropagation();
    dispatch(addMyPokemon(data));
  };

  return (
<CardContainerLink to={`/dex/detail?id=${data.id}`} onClick={goToPokemonDetail}>
	<PokemonCardImage src={data.img_url} alt={data.korean_name} />
	<PokemonCardName>{data.korean_name}</PokemonCardName>
	<PokemonCardNum>no.{data.id.toString().padStart(3, "0")}</PokemonCardNum>
	<ToggleButton onClick={handleAddPokemon}>+ add</ToggleButton>
</CardContainerLink>

💡 코드를 뜯어보면 나온다!!

Link는 어딘가로 연결시켜주는 to 속성을 기본으로 가지고 있다. 그런데 기존의 코드에서 수정을 해주지 않아서 동일한 기능을 하는 클릭 이벤트 함수도 그대로 들어가 있다.

중복되는 2개의 기능은 필요 없으므로 click 이벤트를 삭제했다!
그래도 문제는 생긴다.
내가 넣어준 event.stopPropagation()은 캡처링/버블링 방지를 하는 것은 맞으나 Link가 가지고있는 기본 동작인 to 속성은 그대로 실행이 되기 때문이다.
이런 기본 동작을 방지하는 목적으로 사용할 때는 event prevnetDfault() 메서드를 사용해 줘야 한다!

✅ 수정한 코드

const PokemonCard = ({ data }) => {
  const dispatch = useDispatch();

  const handleAddPokemon = (e) => {
    e.preventDefault();
    dispatch(addMyPokemon(data));
  };

  return (
<CardContainerLink to={`/dex/detail?id=${data.id}`} >
	<PokemonCardImage src={data.img_url} alt={data.korean_name} />
	<PokemonCardName>{data.korean_name}</PokemonCardName>
	<PokemonCardNum>no.{data.id.toString().padStart(3, "0")}</PokemonCardNum>
	<ToggleButton onClick={handleAddPokemon}>+ add</ToggleButton>
</CardContainerLink>

• Link 자체에 페이지를 연결할수 있는 to 속성이 있으므로, onClick={goToPokemonDetail} 이벤트 삭제.
• 해당 이벤트가 삭제되어 useNavigate 도 필요가 없어졌으므로 삭제.
• 버튼 이벤트로 인해 전파되는 버블링은 Link의 기본 요소이기 때문에 event.stopPropagation() → e.preventDefault() 변경해 주었다.

원하는 대로 정상적으로 잘 작동된다!

각 이벤트 메소드의 차이점을 알았으니, 다음부터는 구분해서 사용할수 있겠지!!?