[JS] event.preventDefault()

event.preventDefault()는 이벤트의 기본 동작을 중단하도록 하는 method입니다.

언제 사용하나?

'Submit' button

보통 form 태그를 이용하면 button이나 input으로 submit을 구현합니다.

const onSubmit = e => {
  e.preventDefault();
  if (
    titleRef.current.value === "" ||
    logRef.current.value === "" ||
  ) {
    alert("빈칸을 채워주세요");
  } else {
    const today = {
      id: Date.now(),
      title: titleRef.current.value,
      log: logRef.current.value,
    };
    formRef.current.reset();
    onSubmitToday(today); // api
  }
};

<form ref={formRef} onSubmit={onSubmit}>
  <input
    type="text"
    ref={titleRef}
    placeholder="오늘 가장 기억에 남는 일은 무엇인가요?"
    />
  <textarea
    row="4"
    ref={logRef}
    placeholder="짧게 기록해봐요."
    />
  <input
    type="submit"
    value="Today+"
    onClick={onSubmit}
    />
</form>

이 때 submit button이 클릭되면, 새로고침이 기본 동작으로 발생합니다.

새로고침이 발생하면 form에서 서버 등으로 전달하고자 하는 value값이 모두 초기화되어 빈 value가 서버로 전달되고 오류가 발생하게 됩니다.

이를 방지하기 위해 event.preventDefault()를 사용합니다.

a link

태그에 페이지 url을 연결할 때 a 태그를 주로 사용합니다. 이 태그를 사용해 url을 연결하면 새창에서 링크가 열립니다.

function prevent(event) {
	event.preventDefault();
}

<div id="div">
  <a href="http://www.google.com" target="_blank" onclick="prevent(event)">구글</a>
</div>

새창으로 열리는 것을 방지하기 위해서도 event.preventDefault()가 사용됩니다.

체크할 것

1. 태그에 적용된 모든 이벤트가 취소되는 것은 아닙니다.
2. stopPropagation() 이나 stopimmediatePropagation()처럼 이벤트의 위임까지 방지하지는 못합니다.