[Javascript] button 누를 때마다 새로 고침 될 때

프로젝트를 수정하는 도중에 버튼을 생성하여 테스트를 하는데 계속 내가 설정해 놓은 기능을 실행하고 새로고침이 되는 현상이 발생하였습니다. 구글링을 하여 알아낸 결과는 매우 간단했습니다.

<form>
  <button class="button" @click="myfun">실행!</button>
</form>

위와 같은 상황이었는데 자꾸 해당 버튼을 누르고 나면 새로고침이 되는 현상이 발생하고 있었습니다. 여기서 문제점은 form 태그안에 button 태그가 존재할 때 나타나는 현상이었습니다.

form태그안에 button태그가 있고 이 button태그에 따로 type을 정해주지 않았을 때, 이 button태그는 submit과 같이 동작을 하도록 되어있습니다. 그래서 의도한 바와는 다르게 button을 누를 때 마다 submit을 실행하게 되었고, 이 동작이 새로고침과 같다고 생각한 것 입니다.

<form>
  
  <!--before @click의 기능과 submit 기능이 함께 동작!!-->
  <button class="button" @click="myfun">실행!</button>
  
  <!--after @click의 기능만 동작!!-->
  <button type="button" class="button" @click="myfun">실행!</button> 	
  
</form>

따라서 form 안에서 button을 사용할 때 에는 type을 까먹지 말고 확실하게 적어주는 것이 중요하다는 것을 배웠습니다.