[HTML] button type 속성의 기본값 :: 마이구미
이 글은 button 태그의 속성 중 type 에 대해 다뤄본다.
button type 속성의 기본값을 인지하지 못해서 발생한 이슈를 남겨보려고한다.
button type - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
4가지 버튼들이 등장하는 이유를 알아보자.
대부분 button 태그의 type 속성에 대한 존재를 이미 인지하고 있을 것이다.
본인의 경우에는 대부분 지정하지 않고, form 요소 내부에서 submit 역할의 버튼을 위해 선언하곤했다.
<div>
<button>이동</button>
</div>
<form>
<button type="submit">제출</button>
</form>
언급된 사용 형태와 코드만으로 추정할 수 있는 건 무엇일까?
type 속성의 기본값이 "button" 인 것처럼 사용하고 있다.
하지만 기본값은 "submit" 이다.
본인의 경우에는 여태까지 type 속성의 기본값이 "button" 이라고 생각하고 있었던 것이다.
<form>
<button>클릭</button>
</form>
결국 위와 같은 코드에서 버튼 클릭은 폼 제출을 의미하는 것이다.
버튼을 클릭하게 되면 폼 제출이 되면서 페이지는 다시 로드하게 된다.
기본값에 대한 인지가 안되어있다면, 개발 작업 도중에 예상치 못한 이슈가 발생할 수 있다.
(최하단 예제 코드 참고)
그렇다면 왜 기본값을 오해했을까?
사실 type="submit" 이 선언되어있는 코드를 훨씬 더 많이 접해서 그렇지 않을까? 생각한다.
그리고 만약 mui, antd 와 같은 UI 라이브러리를 사용에 익숙하다면, 더더욱 기본값이 "button" 이라고 생각할 수 있다.
그 이유는 실제 Button 컴포넌트의 결과물을 확인하면 알 수 있다.
스크린샷처럼 Button 컴포넌트는 별도 type 을 지정하지 않아도 기본적으로 "button" 으로 지정된다.
두 라이브러리의 실제 코드를 확인하면 내부적으로 type 의 기본값을 "button" 으로 지정하는 코드를 볼 수 있다.
https://github.com/ant-design/ant-design/blob/master/components/button/button.tsx#L112C5-L112C24
// mui
buttonProps.type = type === undefined ? 'button' : type;
// antd
htmlType = 'button'
비록 HTML button 의 type 속성의 기본값은 "submit" 이겠지만, 실제 구현하는 입장에서는 "button" 이 기본값이 더 적절하다는 모습을 볼 수 있다.