[HTML] Button 선택 시 페이지가 Reload 되는 현상 ~~(버튼 리로드)__-The page refreshes when the button is pressed-++

1. 문제 : 

- button을 누를 경우, 페이지가 reload 되는 현상

= 일반 button을 누를 경우, (버튼에 설정해놓은 이벤트 외에 추가로) 페이지가 제멋대로 reload 되는 경우가 있다.

2 원인 : 

button이 form 태그 안에 있을 경우 발생한다.

덧붙여, button의 type 속성의 기본 값은 'submit'이다.

즉, 버튼을 클릭할 경우

<form method="POST">

    <button name="data" type="submit" onclick="getData()">Click</button>

</form>

위와 아래 코드는 같은 동작을 한다. (default type : submit)

<form method="POST">

    <button name="data" onclick="getData()">Click</button>

</form>

3. 해결 :

두가지 방법이 있는데, 상황에 따라 적절히 활용하면 될 것이다.

- 첫번째 방법은, button의 type을 'button'으로 설정하거나,

<form method="POST">

    <button name="data" type="button" onclick="getData()">Click</button>

</form>

- 두번째는, form 태그를 div로 대체하면 된다.

<div>

    <button name="data" type="button" onclick="getData()">Click</button>

</div>

출처 : https://devhoma.tistory.com/90