React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링)

부모 영역에서는 클릭하면 상세 페이지로 들어가는 이벤트가 있고,

자식 영역에서는 클릭하면 다른 상세 페이지로 들어가는 이벤트가 있다.

 

이 때는 부모 영역을 클릭하더라도 자식 이벤트 발생 후 부모 이벤트가 발생한다.

이는 부모 영역이 자식의 영역을 덮고 있어 이벤트 버블링이 발생하여 생긴 이슈이다. 

이를 해결하기 위해서는 이벤트 객체를 받아 중지시키는 stopPropagation() 함수를 사용하면 된다.

 

결과화면 미리보기

 

**이벤트 버블링이란 (더보기클릭)

자식함수가 부모 내부에 존재하기 때문에 떨어진 물방울이 바깥으로 번지듯이 자식 → 부모 순으로 이벤트가 실행이 된다.

 

 

 

---

React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링)

 

Detail.tsx 

자식태그의 onClick 함수인 goToBill()을 실행하기 전에 stopPropagation() 함수를 실행해주자.

  const goToBill = useCallback((id) => {
      if (!props.bill.id) {
        return;
      }
      history.push(`/bill/${bill.id}`);
    
    },[props.bill.id]
  );

 

<div onClick={() => goToDetail()}>
  <p>상세내용 자세히보기</p>

  <div>비용</div>
  <div
    onClick={e => {
      e.stopPropagation(); // 이벤트방지함수를 먼저 실행하면
      goToBill(bill.id);   // 생각한대로 실행이 된다.
    }}
  >
    영수증 자세히 보기
  </div>
</div>