[Javascript] event.preventDefault()

preventDefault

a 태그나 submit태그를 누르게 되면 하이퍼링크를 타고 이동하거나 창이 새로고침되어 실행된다.

이때 event.preventDefault()를 이용하여 이러한 현상을 막을 수 있다.

 

React에서 onChange로 값을 받고 state에 상태를 저장하려고 하는 경우,

만약 onClick이 아닌 onSubmit 형태로 제출된다면 페이지가 새로고침되어 다시 초기화 될 것이다.

 //TodoList 만들던 코드 일부 발췌...
 const onSubmitHandler = (event) => {
    event.preventDefault(); 
    if (todo.title.trim() === "" || todo.body.trim() === "") return;
    setTodos([...todos, { ...todo, id: number }]);
    setTodo(initialState);
    number++;
  };

만약 event.preventDefault()를 사용하지 않았더라면 setTodos로 todos에 인풋값 넣은과 동시에 화면이 새로고침되어 다시 원래상태로 돌아가게 된다. 하지만 event.preventDefault()를 사용하면 submit은 작동되지만 새로 실행하는 역할은 하지 않게 된다.