이벤트 버블링? `stopPropagation`메소드로 해결

오류 내용

부모 div의 onClick 이벤트에 상세페이지로 이동할 수 있도록 기능을 부여헀는데

해당 div안에 다른 기능을 하고 있는 버튼을 눌렀을 때도 상세페이지로 이동하는 버그가 생겨버렸다

 

아무래도 부모 요소의 onClick이 자식 요소에게 까지 전파가 되어 버려서

일어난 버그인 것으로 유추가 되지만 좀 더 자세히 알아볼 수 있도록 정보를 캐왔다

 

오류 원인

HTML 문서에서 요소들은 "중첩 관계"라는 것을 가질 수 있다고 하는데 

어떠한 요소가 또 다른 요소안에  존재할 수 있고 해당 요소의 클릭 이벤트는

부모-> 자식 혹은 자식-> 부모로 계속 전파된다고 함 이를 "이벤트 버블링"이라 함

 

해결 방법

그리하여 stopPropagation이라는 메소드를 사용해서

현재 요소에 등록된 이벤트 리스너만 실행되고 상위 요소로 전파되는 것을 막아버리면 되는 것임

 

코드를 한 번 살펴보면 

const PokemonCard = ({pokemon, index, isSelected, onAddPokemon, onDeletePokemon, onDetailClick}) => {
  return (
    <PokemonContainer onClick={onDetailClick}>
      <img src={pokemon.img_url} alt="" />
      <div>
        <PokemonName>{pokemon.korean_name}</PokemonName>
        <PokemonNumber>No. {index + 1}</PokemonNumber>
      </div>
      {isSelected ? (
        <RedButton
          text="삭제"
          onClick={(e) => {
            e.stopPropagation();
            onDeletePokemon();
          }}
        />
      ) : (
        <RedButton
          text="추가"
          onClick={(e) => {
            e.stopPropagation();
            onAddPokemon(pokemon);
          }}
        />
      )}
    </PokemonContainer>
  );
};

 

 

PokemonContainer에 있는 onClick 요소가 자식 요소인 RedButton까지 영향을 주어서

버튼을 눌렀을 때 마저 상세페이지로 이동한다는 것임 ->

그리하여 해당 버튼에 stopPropagation 메소드를 넣어주고 문제를 해결하였음 끝

---