[React.js] <form> 요소에서 제출(Submit) 버튼 사용 시 기본 동작 막는 방법

<form> 요소에서 제출(Submit) 버튼 사용 시 기본 동작 막는 방법

들어가며

• @<form>@ 요소 안에 @type@이 @submit@인 버튼을 두고, 클릭할 때, 폼 제출 효과가 발생한다.
  • 해당 버튼을 클릭할 때 폼 데이터가 서버로 전송되면서 페이지가 새로고침 되는데, 이것은 폼의 기본 동작이다.

<form>
    // ...
    <button type="submit">제출</button>
</form>

 

• 이때 폼 제출 효과 막을 수 있는 방법을 정리해본다.

 

방법

방법 1 : @<button>@ 요소의 @type@ 속성을 @button@으로 지정하기

• @<button>@ 요소의 @type@ 속성을 @submit@이 아닌 @button@으로 지정하는 방법이다.

function handleSubmit() {
  console.log("Submitted!");
}

<form>
    <button type="button" onClick={handleSubmit}>로그인</button>
</form>

 

 

방법 2 : @<button>@ 요소의 @onClick@ 이벤트 함수에 @event.preventDefault()@ 코드 넣어주기

• @<button>@ 요소에 @onClick@ 이벤트 함수를 연결해준 후, 해당 함수에 @event.preventDefault()@ 코드를 넣어준다.

function handleSubmit(event) {
  event.preventDefault();    // 추가
  console.log("Submitted!");
}

<form>
    <button type="submit" onClick={(event) => handleSubmit(event)}>로그인</button>
</from>

 

방법 3 : @<form>@ 요소에 @onSubmit@ 이벤트 함수 연결해준 후, 해당 함수에 @event.preventDefault()@ 코드 넣어주기

• @<form>@ 요소에 @onSubmit@ 이벤트 함수를 연결해준 후, 해당 함수에 @event.preventDefault()@ 코드를 넣어준다.

function handleSubmit(event) {
  event.preventDefault();    // 추가
  console.log("Submitted!");
}

<form onSubmit={handleSubmit}>
    <button type="submit">로그인</button>
</from>

 

• 또는 다음과 같이 할 수 있다.

<form onSubmit="return false;">
    <button type="submit">로그인</button>
</from>

 

 

방법 4 : 자바스크립트 코드로 폼의 기본 동작 막기

• @getElementById@ 또는 @querySelector@ 등을 이용하여 요소를 선택하고 @addEventListener@를 이용하여 폼의 기본 동작을 막는  @event.preventDefault()@ 코드를 넣어주는 방법이다.

<form id="myForm">
    <button type="submit">로그인</button>
</form>

<script>
    document.getElementById("myForm").addEventListener("submit", function(event){
        event.preventDefault(); // 추가
        
        console.log("Submitted!");
    });
</script>

 

참고

<form> - HTML: Hypertext Markup Language | MDN

Event: preventDefault() method - Web APIs | MDN