[JS] stopPropagation() & preventDefault() 살펴보기

들어가기에 앞서, 브라우저의 이벤트 전달 방식에 대해 먼저 읽어보시면 좋을 것 같습니다 :)

e.stopPropagation()

ul 태그에 이벤트 리스너를 추가했을 때 하위의 이벤트를 감지할 수 있는 이유가 바로 버블링이 발생하기 때문인데요,
이러한 버블링은 의도하지 않은 클릭 이벤트를 발생시킬 수도 있습니다.

<div
  onClick={(e) => {
    setIsChecked(false);
  }}
  style={{ width: "100px", height: "100px", background: "black" }}
  >
  <button
    onClick={(e) => {
      setIsChecked(true);
    }}
    >
    open
  </button>
  {isChecked && (
    <div style={{ width: "50px", height: "50px", background: "white" }} />
  )}
</div>

만약 위와 같은 코드가 있다고 했을 때,
아무리 open 버튼을 클릭해도 내부 div가 보이지 않을 것입니다.
버블링으로 인해 상위 div의 클릭 이벤트를 발생시켜 계속 false가 되기 때문입니다.

이럴 경우 버튼의 클릭 이벤트에 stopPropagation()을 추가해주면, 원하는 대로 작동시킬 수 있습니다.

<button
  onClick={(e) => {
    e.stopPropagation();
    setIsChecked(true);
  }}
  >
  open
</button>

즉, stopPropagation은 상위 태그로의 이벤트 전파를 중지하게끔 합니다.

e.preventDefault()

a 태그에 링크를 넣지 않을 경우 흔히 href값에 #을 넣는데요,
하지만 이를 누르면 페이지 상단으로 이동되어 불편합니다.
또한 submit 태그를 눌렀을 때 자꾸 창이 새로고침되어 실행되는 것 또한 불편함을 유발하는데요,
이 때 이러한 현상을 해결해주는 것이 preventDefault입니다.

const [isChecked, setIsChecked] = useState(false);
const handleSubmit = (e) => {
  setIsChecked(true);
};

return (
  <form onSubmit={handleSubmit}>
    <button>submit</button>
    {isChecked ? "true" : "false"}
  </form>
 )

만약 위와 같은 코드가 있다고 했을 때,
submit을 누르게 되면 true가 변경된 채 남아있지 않고 새로고침되어 다시 초깃값인 false로 돌아가게 됩니다.

이럴 경우 submit 함수에 preventDefault()를 추가해주면
새로고침되지 않고 true로 남아있도록 작동시킬 수 있습니다.

const handleSubmit = (e) => {
  e.preventDefault();
  setIsChecked(true);
};

즉, preventDefault는 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소하게끔 합니다.

Reference

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation
https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault