IT/에러

[에러] form input 내에서 button 또는 submit할 때, 웹페이지 refresh되는 현상

KimCookieYa 2023. 6. 20. 16:01

문제 상황

정글 2기 첫 미니프로젝트를 진행하면서 button을 누르면 console.log를 찍도록 했는데, 아무리 버튼을 눌러도 콘솔로그가 찍히지 않았다.

127.0.0.1 - - [07/Apr/2023 18:20:13] "GET /main HTTP/1.1" 200 -

 

자꾸 내가 쏜 적도 없는 GET 요청이 가서 뭐가 이상한지 몰랐는데, 알고보니 <form> 태그 내부의 <button> 또는 <input type="submit"> 클릭 시 기본적으로 페이지가 reload된다고 한다.

 

솔루션

필자가 찾은 해결 방법은 3가지이다.

  1. form 태그를 div 태그로 바꾼다.
  2. JS에서 preventDefault로 기본동작을 막을 수 있다. 
    btn.addEventListener('click', function(e)) {
 e.preventDefault();
});
  3. button 태그의 type 속성을 button으로 주면 페이지가 새로고침되지 않는다. 
    <button type="button">

참고