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

문제 상황

정글 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">

참고

• https://velog.io/@seokunee/form-input%EC%97%90%EC%84%9C-enter%EB%A1%9C-submit-%ED%95%A0-%EB%95%8C-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-refresh%EB%90%98%EB%8A%94-%ED%98%84%EC%83%81
• https://special.tistory.com/entry/form-%EC%95%88%EC%9D%98-button-%EC%9D%B4-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8%ED%95%98%EC%A7%80-%EC%95%8A%EB%8F%84%EB%A1%9D-%ED%95%98%EA%B8%B0