a태그를 클릭해도 페이지 이동을 하지 않거나 체크박스 클릭이 안되도록 하고 싶다면 어떻게 할까? 그럴 때 사용하는 메서드가 있다.

event.preventDefault()

특정 이벤트가 발생했을 때 기본 동작이 일어나지 않게 한다. 대신에 원하는 동작이 실행할 수 있도록 코드를 짤 수 있다. 예를 들어서, 하이퍼링크를 막는다거나 폼 제출 시에 페이지 로드를 하지 않는 등 다양하게 활용할 수 있다.

아래 예시를 살펴보자.

a 태그에 youtube 주소를 걸어줬다. 클릭을 하면 원래는 유튜브로 바로 이동해야하지만 event.preventDefault()를 사용하여 클릭하지 않도록 했다.

만약 input란에 특정 문구를 입력해야만 유튜브 링크를 들어가게 하고 싶다면 아래처럼 코드를 짤 수 있다.

폼 제출에서도 활용할 수 있다. submit은 페이지 이동 혹은 새로고침이 발생하는데, 이를 제한하고 싶다면 event.preventDefault()를 쓰면 된다.

function App() {
  const [todo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if(todo === '') {
      return ;
    }
    setToDos((currentArray) => [todo, ...currentArray]);
    setToDo("");
  }

  return (
    <div className="App">
      <form onSubmit={ onSubmit }>
        <input 
        onChange= { onChange }
        value={ todo }
        type="text" 
        placeholder="Write your to do...."/>
        <button>Add To Do</button>
      </form>
    </div>
  );
}

위의 경우에 버튼을 클릭하면 폼 제출이 일어나면서 페이지가 새로고침된다. 새로고침이 일어나지 않도록 하기 위해서 event.preventDefault()를 주고, 사용자가 입력한 값을 가져와 setToDos를 이용해서 toDos라는 state를 변화시킨다.