event.preventDefault() / event.stopPropagation()

📌 event.preventDefault()

event.preventDefault는 어떤 이벤트를 설정해두지 않은 경우, 해당 이벤트에 대해서 기본 동작을 하지 않도록 한다.

이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소한다. 즉 이벤트 구현에 대한 기본 동작을 하지 않게 해준다. 

 

나 같은 경우에 handleSubmit 을 사용할때 event.preventDefault() 이 설정을 하지 않으니까 submit을 누를때마다 handleSubmit의 기본 동작인 페이지새로고침이 실행되었다. 

 

 

---

 

🧷 event.stopPropagation()

event.stopPropagation()은 링크나 버튼 클릭은 막는 것이 아닌, 현재 이벤트가 캡처링이나 버블링 단계에서 더 이상 확산되는 것을 방지한다. 이를 방지해도 기본 동작은 실행되기때문에 아예 막으려면 위의 event.preventDefault()를 사용해야 한다.