event.stopPropagation()

보통 우리가 이런 식의 코드가 있었다고 해보자.

<ul>
<li>
<a onClick={블라블라}> 블라블라 </a>
</li>
</ul>

a 태그는 li, ul의 두 개의 부모 태그가 있다.
사용자가 a 태그를 클릭한다면 a 태그만 실행이 되는 것이 아니라 li, ul태그로 순차적으로 전달이 된다.

즉, a 태그의 onclick -> li 태그의 onClick -> ul 태그의 onClick을 실행하게 되는 것이다.

만약 ul태그에 클릭 이벤트가 있을 경우에 a 태그를 클릭하는 순간에는 의도하지 않게 ul 태그의 클릭 이벤트가 실행이 된다.

그래서 사용하는 것이 stopPropagation, 즉, 부모태그로의 이벤트 전파를 stop하라는 의미다.

event.preventDafault()

<a href='#'>홍왕열</a>

위와 같은 코드가 있을 때, href="#"은 웹브라우저가 다른 곳으로 이동하지는 않지만 스크롤이 있는 곳에서는 페이지 상단으로 이동하게 된다.
이럴 때 누를 때마다 click 이벤트 외에 상단으로 이동하게되는 짜증나는 일이 발생하게 된다.

이럴 경우에 쓰는 것이 preventDefault이다.

즉, a tag처럼 click event 외에 별도의 브라우저 행동을 막기 위해서 사용이 되는 것이다.