[javascript] event.preventdefault()란?

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

Event.preventDefault() - Web API | MDN

 

event.preventdefault()란?

event.preventdefault()는 Event 인터페이스에서 제공하는 메서드로 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다

 

예를 들어 <a> <submit> <button> 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데event.preventdefault() 메서드를 통해 해당 이벤트 발생을 막을 수 있습니다

 

에제

<submit> 태그의 경우 그 태그의 값을 전송하면서 해당 페이지를 새로고침 하는 기능을 가지고 있습니다

 

이때 사용하는 것이 바로 event.preventDefault()입니다.

 

const submitHandler = (event) => {
    event.preventDefault();

    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    console.log(expenseData);
    setEnteredTitle('');
    setEnteredAmount('');
    setEnteredDate('');
  };

 

위 코드의 경우 event.preventDefault()가 없다면 화면이 새로고침되어 콘솔결과가 출력되지 않지만 event.preventDefault()를 추가할 경우 콘솔결과가 보이게 됩니다.