[HTML] button 누르면 페이지 Reload 되는 현상

몇 일 전 개발 중 버튼을 누르면 계속 창이 새로고침 되는 현상을 발견했다.

실시간으로 영상을 불러오는 팝업 페이지 인데 버튼만 누르면 팝업창이 새로고침 되버려서 영상도 계속 새로 불러오고 한번만 불러와도 되는 데이터를 또 불러오고...이게 뭐람...?

 

뭐가 문제일까 하고 구글링을 한 결과 원인을 알게 되어 까먹지 말라고 적어본다.

 

원인!

 

1. button 이 form 태그 안에 있으면 페이지가 새로고침 된다.

2. button type의 디폴트값은 submit 이다. 

<button id="btn"><button>
<button type="submit" id="btn"><button>

두개의 버튼은 똑같은 동작을 하는것이다.

 

결론!

 

1. form 태그를 div 태그로 바꾸면된다.

2. button type을 "button" 으로 하면 된다.

 

나는 form 태그 안에 button을 사용중이었으나 부트스트랩으로 넣어두어 css가 걸리기 때문에 두번째 방법인 type을 button으로 바꾸었다. 그러니 아주 잘 동작! 새로고침도 안하고 영상도 잘 불러온다. 만족만족 :)

 

여윽시 구글링!

 

※ 열심히 공부해 나가는 과정이며 제가 참고하기 위해 만든 스토리이기 때문에 틀린 부분이 있을 수도 있습니다. 만약 틀린 부분이 있다면 댓글 부탁드립니다.