submit! 가고싶은 대로 간다!

서버와의 연결이 없을때 새로고침은 데이터 초기화를 야기한다.
하지만 submit을 사용하고 싶었다.
문제는 submit은 제출 후 새로고침을 강제한다는 것이다.

서버와 데이터베이스 없이 새로고침 되면 리덕스 데이터가초기화 되는 것은 당연하다.

해결하고 싶었다.
submit이 완료되어 새로고침이 일어나기 전에 navigate로 빠져나와도 된다.
물론 에러가 나겠지만 말이다.

하지만 우리는 원치않는다.

홈으로도 돌아가고 싶고, 새로고침도 원치 않는다.

홈으로도 돌아가고 싶고, 새로고침도 원치 않는다. 에러는 더더욱 싫다.

그때 사용할 수 있는 것이 preventDefault()이다.

preventDefault()는 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다.

const addWord = (e) => {
    let tmp_dict = {
      ...
    };
    dispatch(createDictFB(tmp_dict));
    navigate("/");
    alert("정상적으로 등록되었습니다.");
    e.preventDefault();
  };

<form onSubmit={addWord}>
...
<Button type="submit">등록하기</Button>
...
</form>

preventDefault()를 사용하지 않을 경우 아래와 같은 에러문구가 나온다.
Form submission canceled because the form is not connected

이는 submit에 의한 form 작동 중navigate("/")가 실행 되며 발생한 것이다.
navigate에 의한 페이지 이동이 submit에 의한 자동 새로고침을 막았기 때문이다.

preventDefault()를 사용하면 이벤트의 기본 동작을 실행하지 않도록 지정할 수 있다.
이를 이용해 submit을 통한 데이터 전달은 정상적으로 작동하며 페이지 새로고침만 막을 수 있게 되었다.

이처럼 preventDefault() 를 이용하면 에러도 없고 새로고침도 없다.