preventDefault

우선 현재 이 기능을 왜 사용하게 되었냐면 html에서 form-input 을 이용해 로그인 하는 창을 만들었다.

그리고서 여기에 정보를 입력하고 Log In 버튼을 누르면 창이 새로고침 된다. 왜냐하면 브라우저는 버튼을 클릭하거나 엔터를 누르면 form을 submit하면서 새로고침을 하는게 default 값이기 때문이다.

그래서 preventDefault 를 사용해 창이 새로고침 되는 것을 막아야 한다.

---

그리고 한 가지 알아야 할 정보가 있다.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
 
function onLoginSubmit(tomato) {
  tomato.preventDefault();
  console.log(tomato);
}
 
loginForm.addEventListener("submit", onLoginSubmit);

이 코드에서 function onLoginSubmit(tomato){} 이 부분에 대해 알아야 한다.

코드를 보다싶이 function onLoginSubmit(tomato){} 에서 tomato 는 그냥 아무 단어를 넣은 것이다. (보통은 event 라고 적는 게 관행)

왜냐하면 우리는 방금 일어난 event 에 대한 정보를 지닌 argument를 넣을 공간이 필요한데 그 공간이 없었기 때문에 공간을 할당한 것 뿐이다.

그렇게 EventListner 함수의 첫 번째 argument 안에 있는 function인 preventDefault 을 이용해 브라우저가 가지고 있는 기본 동작을 못하게 한다. 그리고 tomato로 만들어 둔 공간에 정보를 할당해 우리에게 제공한다.

---

다른 예시로 HTML 에서 <a> 태그는 하이퍼 링크를 생성시키고 유저가 그 링크를 누르면 해당 URL로 이동하게 된다. 그것은 브라우저의 기본 동작인데 preventDefault 를 사용하면 링크를 눌러도 이동하지 않는다.

const link = document.querySelector("a");
 
function onClick(event) {
  event.preventDefault();
}
 
link.addEventListener("click", onClick);