submit 이벤트와 preventDefault

React에서 TodoList에 새로운 todo를 추가하는 기능을 구현하고 있었는데, input에 내용을 입력하고 추가를 위해 버튼을 클릭하니 내용이 추가되는 즉시 페이지가 reload 되는 문제가 생겼다.

  return (
    <form id='todoForm' className='todo-form' onSubmit={handleSubmit}>
      <input
        type='text'
        placeholder='Add a todo'
        value={inputText} name='todoInput'
        className='todo-input'
        onChange={handleChange} />
      <button className='todo-button'>Add todo</button>
    </form>
  );

확인해보니 submit 이벤트는 이벤트가 발생하면 창이 reload 되는 특성을 가지고 있었던 것이다. 그래서 이벤트의 전파를 막지않고 이벤트의 동작을 취소하기 위해 preventDafault를 사용했다. 그 결과 창이 reload 되지 않지만 새로운 todo는 list에 추가된 것을 확인할 수 있었다.

const handleSubmit = (e) => {
    onSubmit(inputText);
    setInputText('')
    e.preventDefault();   // reload를 막는다.
};