[JavaScript] form의 submit으로 인한 새로고침 방지

<form> 내부의 type='submit'의 <button>을 사용하여 폼을 제출했더니,
의도와는 달리 페이지가 새로고침되는 것을 확인했다.

검색해서 조금 알아보니, submit은 href, replace와 마찬가지로
페이지를 이동시키는 기능이 자체적으로 내장되어 있는 듯하다.

이렇듯 원치 않는 이벤트가 발생할 때,
해당 이벤트를 중지할 수 있는 방법이 바로 event.preventDefault() 메서드다.
이 메서드에 대한 공식 문서는 여기 통해 확인할 수 있다.

나의 경우를 천천히 풀어보자면, 다음과 같다.

function Example() {
  function action(event) {
    console.log('Hello World!'); 
  };
  
  return
  (
  	<>
      <form onSubmit={(event) => action(event)}>
        <input type='text' name='name' placeholder='Enter your name.' />
        <button type='submit' />
      </form>
    </>
  )
};

export default Example;

Example이라는 컴포넌트 내부에 <form> 태그가 있고, <button>을 누르면
action 함수가 실행되어 콘솔 창에 'Hello World!'가 입력되는 구조다.

허나, action 함수가 실행되고 해당 화면에 고정되어 있었으면 좋겠는데,
이 상태로는 계속 페이지가 새로고침될 것이다.

이때 event.preventDefault() 메서드를 사용하면 새로고침을 쉽게 방지할 수 있다.
나머지 코드들은 그대로 두고, 실행되는 함수 내부에 event.preventDefault()를 작성해주면 된다.

function Example() {
  function action(event) {
    //----------***----------//
    event.preventDefault();
    //----------***----------//
    console.log('Hello World!'); 
  };
  
  return
  (
  	<>
      <form onSubmit={(event) => action(event)}>
        <input type='text' name='name' placeholder='Enter your name.' />
        <button type='submit' />
      </form>
    </>
  )
};

export default Example;

위와 같이 실행되는 함수 내부에 작성해주면 페이지가 더 이상 새로고침되지 않는다!