Event bubbling
내부 요소(inner element)의 이벤트가 아닌 상위 요소의 이벤트가 발생될 때
아래의 코드에서 내부의 svg를 클릭해도 상위 tr의 onClick이 동작하는 이유는 이벤트 버블링(Event Bubbling) 때문입니다.
<tr onClick={() => console.log('TR clicked')}>
<td>
<svg
onClick={(e) => {
console.log('SVG clicked');
}}
>
{/* SVG content */}
</svg>
</td>
</tr>
e.stopPropagation()를 사용하여 이벤트 전파를 중단해야 한다:
<tr onClick={() => console.log('TR clicked')}>
<td>
<svg
onClick={(e) => {
e.stopPropagation(); // 이벤트 전파 중단
console.log('SVG clicked');
}}
>
{/* SVG content */}
</svg>
</td>
</tr>