HTML의 Form(폼) 태그가 새로고침을 유발하는 이유: URL 리다이렉션(Redirection)

 

이 글은 먼저 자바스크립트 코드를 통해 글의 동기를 서술하고,

밑부분에 새로고침이 발생하는 이유를 보여주는 구성을 가지고 있습니다.

 

 

이유바로 보기

 

 

 

Form(폼) 태그를 다루는 자바스크립트 코드

 

밑의 코드는 자바스크립트를 통해 폼의 이벤트를 감지하는 

예제의 템플릿이다

 

코드의 구성은 다음과 같다.

 

1. 변수: DOM document 오브젝트의 메서드를 통해 폼 태그가 저장되어 있다.

 

2. 콜백함수: "submit"이벤트가 폼태그에서 발생했을 때 호출된다

 

3. 이벤트리스너: 1번의 변수에 저장한 폼의 "submit" 이벤트를 감지하는 비동기함수이다.

const myForm = document.querySelecotr("form")

 /**Event Listener는 콜백함수의 첫 인자로 
  * event 오브젝트를 보내준다. */
const handleSubmit = function(event) {
    
    /* Form에 "submit" 이벤트를 감지할때,
    * 보통 코드의첫줄은 해당 이벤트의 기본동작을
    * 막는것이다.
    */
    event.preventDefault();
}

myForm.addEventListener("submit", handleSubmit)

 

코드에서 이미 주석을 통해 설명했지만,

폼태그에 감지된  "submit" 이벤트에 관한 콜백함수를 정의할 때

 

항상 첫 줄에 event의 기본동작인 새로고침을 막기 위해

prevendDefault() 메서드를 넣어준다.

 

대체 Form이란 무엇이기에 새로고침을 발생시키는 것일까?

 

 

 

Form태그의 정체

 

 

HTML의 폼은 Web Form(웹 폼)이라는 도구 중 하나이다.

 

웹 폼은 인터넷 페이지와 접속자의 상호작용을 위한 창구로 만들어졌다.

유저에게 입력받은 정보를 웹서버로 전송하는 역할을 한다.

 

"submit"은 GET과 POST를 발생시킨다.

 

"submit" 이벤트가 발생했다는 것은 HTTP의 GET 및 POST 요청이 발생했다는 이야기다.

 

여기서 GET 메서드는 요청에 대한 응답으로 새로운 URL 링크를 받는 특징을 갖고 있다.

무언가를 입력해서 다른 웹페이지로 이동하는 것은 인터넷 유저에게 굉장히 익숙한 동작이다.

 

그게 바로 폼의 기본동작이다.

 

예시

 "submit" 이벤트를 발생시키는 예시

로그인 페이지에서 id와 비밀번호를 입력하고
확인 버튼을 누르자, 잠시 뒤 로그인 완료 페이지로 이동되었다. 

 

이렇듯 Form의 기본동작에는 다른 웹페이지로 이동이 포함되어 있다.

그래서 웹페이지 이동 (혹은 새로고침)이 발생하는 것이다.

 

 

다음은 MDN에서 가져온 폼의 request-response(요청-응답) 프로세스를 묘사한 그림이다.

맨 마지막 동작을 보면 다음과 같은 문장이 있다.

 

Redirect browser to "success" URL

- 요청의 성공 시 정해진 URL로 브라우저를 재연결 해준다.

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms

MDN문서 설명:
1.  웹페이지를 요청받았을 때, 기본 폼을 보여줍니다.

2. 이용자가 데이터를 보통 HTTP의 POST 요청으로
전송(submit)합니다.

3. 데이터를 검증합니다.

4. 데이터가 무효하다면, 오류 메시지와 함께
폼을 다시 보여줍니다.

5. 만약 데이터가 유효하다면, 요청받은 동작을 수행합니다.
-데이터를 DB에 저장하거나, 공지 메일을 보내거나, 검색결과를 보내주거나 등등

6. 모든 동작이 끝난 다면 유저를 다른 웹페이지로 재연결 해줍니다.

 

 

이러한 이유로 웹페이지의 새로고침이 발생한다.

그래서 우리는 preventDefault()로 그 동작을 막아주는 것이다.

 

 

 

읽어주셔서 감사합니다.

오류나 오탈자가 있다면 댓글로 알려주세요.