테이블 내부에 버튼을 클릭 했을 때, 버튼 이벤트로 Modal 이 활성화되도록 구현했다.
그 이전에 테이블 row 를 클릭했을 때 row 가 확장되도록 expandable 기능을 활성화 시켜놨었는데 이 두 기능이 충돌이 일어났다.
버튼을 클릭했을 때는 Modal 만 활성화 됐으면 좋겠는데, row 까지 확장되었다.
버튼 클릭 이벤트에는 적용되어있는 다른 이벤트가 비활성화 되었으면 좋겠다는 생각이 들어 이벤트 관련 코드를 찾아봤다.
e.preventDefault() 과 e.stopPropagation() 두 메서드 모두 이벤트 관련 동작에서 많이 사용되는 코드라서 먼저 차이점을 확인했다.
e.preventDefault() 는 고유 동작을 중단시키고, e.stopPropagation() 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.
내가 하고자 했던 것은 태그들의 고유 동작(<a> 태그의 페이지 이동, <form> 태그의 전송 등)을 중단시키는 것이 아닌, 이벤트를 중단시키는 것이기 때문에 e.stopPropagation() 을 사용했다.
여담으로, e.preventDefault() 도 사용해봤지만 원하는 대로 적용되지않았다.
<Button
onClick={(e) => {
e.stopPropagation();
...
}}
>
버튼
</Button>