자바스크립트를 이용할 때 button type 지정에 관한 궁금증

Question

안녕하세요! 자바스크립트를 사용하여 정보 전송을 제어할 때, 전송 button의 type을 "button"으로 지정하라는 부분과 관련해 궁금한 점이 있습니다. button의 type을 submit으로 지정할 경우, 해당 버튼 클릭, 엔터키 입력 그리고 스페이스바 입력 등 form에 대한 모든 submit 이벤트를 유발하는 동작이 유효해지더라구요. 그래서 저는 종종 button의 type을 submit으로 지정하고, form의 submit 이벤트에 event.preventDefault 메서드로 본래의 동작을 막은 후 원하는 자바스크립트 코드를 실행시키고는 합니다(아래 예시). 이 경우에 어떤 문제가 있을 수 있을까요? document.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); // 원하는 동작을 수행하는 코드 })

조은 · Answer

안녕하세요. 해당하는 경우라면 form 내에서 submit 을 목적으로 button을 사용한 것이니, button 요소의 type을 submit으로 사용하시는 게 옳은 판단이 맞습니다. button에서 type="button" 을 사용하는 케이스는, 예를 들어, 버튼을 눌렀을 때 modal 을 띄운다는 등 다른 JavaScript 동작을 시키는 경우에만 해당합니다.