[HTML] 버튼태그(<button>)에 type 설정이 필요한 이유

장애발생

최근 이상한 장애가 하나 발생했다.
작동해야할 로직 하나가 작동을 하지 않았다.
지금까지 몇년간 문제없던 로직인데 무슨 일이 일어난 것일까?

원인분석

해당 로직은 이전화면으로부터 값을 전달받아 동작하는 로직이다.
근데 현상재현을 시도하는 도중 form태그 안에서 엔터를 클릭하자 화면이 새로고침되는 현상이 발생됬고, 그 이후 로직이 정상동작하지 않았다.

범인을 잡았다!

최근 수정이력을 하나하나 비교하던 도중 div 태그를 button 태그로 변경한 이력이 있었다.
웹접근성으로 인해 해당 태그를 키보드로도 접근이 가능해야하기에 수정된 소스였다.

<div>
  <p>테스트</p>
</div>

위 소스를 아래처럼 변경했다.

<button>
  <p>테스트</p>
</button>

보통은 태그를 변경하지 않고 tabindex를 추가하는 방법이 있다.

<div tabindex="0">
  <p>테스트</p>
</div>

하지만 사실 이런 문제가 발생할 것이라는 생각이 없기도 했고,
키보드로 접근하려면 클릭이 되어야 하지 않을까? 라는 생각으로 button 태그를 사용했다.

button 태그의 사용법?

하지만 여기에는 큰 문제가 있었는데...

바로 버튼 태그의 기본 속성은... submit인 것이다!!!

버튼 태그에는 3가지 타입이 있다.

submit, reset, button

여기서 버튼 태그에 type을 설정하지 않으면 기본이 submit이고 이는 form태그에서 예상하지 못한 오류를 반환한다...

의도하지 않은 순간에 Form이 제출된다던지하는...

아무튼 참 별거 아니라고 생각한 수정이 이렇게 커다란 오류를 불러올지는 몰랐다.

<button type="button">잊지말자 타입설정</button>

잊지말자!! 버튼 타입설정!!