event.preventDefault() - form submit시 페이지 reload 안하기

프로젝트 중 버튼을 누르면 form태그에 입력한 데이터를 서버에 전송하기 위해 post 요청을 하는데 요청 전에 페이지가 reload 돼서 요청을 막는 이슈가 발생했다.

event.preventDefault() 함수는 html에서 a태그나 submit 태그는 고유의 동작으로 페이지를 이동시키거나, form 안에 input등을 전송하는 동작을 막는 역할을 한다.

const submitPost = async (event) => {
    await event.preventDefault();
    const config = {
      method: "post",
      url: ... ,
      data: {
      ...
      },
    };
    await axios(config)
      .then((res) => {
        console.log(res);
        alert("등록 완료");
        navigate("/postList");
      })
      .catch(() => {
        alert("실패");
      });
  };
  
  //생략
  
      <form className="createForm" onSubmit={submitPost}>
      	...
        <div className="buttonBox">
          <button type="submit">등록하기</button>
        </div>
      </form>
    </div>
          

위처럼 submitPost 함수 안에 event.preventDefault()함수를 넣으면 reload를 막고 서버에 post 요청을 할 수 있다.