React 이벤트 버블링

문제 원인

이벤트 버블링

문제 상황

데이터테이블 컴포넌트에서 클릭이벤트 효과가 적절히 이루어지지 않는 이슈.
체크박스와 별개로 테이블 행 클릭 시 해당 제품의 페이지로 이동해야 한다.
하지만 체크박스를 클릭해도 제품 페이지로 이동되는 상황.

해결 과정

✏️ 확인 되는 것

• 행 클릭 시 id와 체크박스 클릭 시 checked된 값은 별도로 관리중.
• 테이블 행 클릭 시 페이지마다 고유한 id 값은 정상적으로 콘솔창에서 보여짐.
• 그렇다면 이벤트 처리가 안되고 있다. 하지만 분명 행에 onClick을 적용한 상태.
• 체크박스와 데이터 열은 구분되어 있는 상태. 데이터 내용은 페이지마다 매핑을 통해 보여주기 때문에 연관 없다고 판단.

✏️ 시도 한 방법

• 체크박스와 이벤트 타겟이 겹쳐졌다고 생각해 체크박스에 focus 시 되도록 코드 변경
• 이벤트가 적용을 테스트해보기 위해 e.preventDefault() 해보니 잘 작동되는 상황.

✏️ 해결

• 이벤트 버블링이 문제였다. 이벤트는 DOM트리를 따라 전파된다.
  • 전파되지 않도록 e.stopPropagation()를 작성해주었다.
• 추가로 테이블 행 안에 selectBox 요소가 있을 경우에는 행 클릭을 통한 페이지 이동이 이루어지면 안된다.
  • if문 조건도 추가로 작성해주었다. if (event && event.target.tagName !== "SELECT")

알게 된 점

이벤트 버블링의 개념에 대해서는 알 고 있었다. 하지만 직접 경험해 본 적이 없어 이벤트 버블링이 원인일거라 생각도 하지 못했다. 또한 체크박스 열과 다른 데이터의 열을 따로 구분해놨기 때문에 연관 없다고 판단 한 것이 잘못 된 생각이었다. 이틀동안 고민했지만 결국 코드 몇 줄로 문제가 해결되었다.
직접 겪어보니 다음에 이벤트 처리가 적용되지 않을 때는 이벤트버블링이 꼭 떠오를 것 같다. 또 내 생각이 맞은게 아니니 코드가 정상적으로 작동될 때 까지는 스스로 판단하지 말자고 느꼈다.