Button 태그에 type을 명시하면 좋은 점

실무에서 코드를 작성하는데 eslint가 type을 자꾸 명시하라한다.. 왜그럴까 궁금해서 찾아보았다.

 

1. 브라우저 기본 동작 방지

button 태그의 기본 타입은 "submit"으로 설정되어 있다. 따라서 버튼 클릭 시, 주의 폼의 제출 동작이 발생할 수 있다. 이런 동작을 방지하기 위해서 type="button"을 명시하여 버튼의 클릭 동작이 폼을 제출하지 않도록 방지할 수 있다. 

 

2. 사용자 경험 개선

버튼의 목적이 폼 제출이 아닌 함수 호출 등 다른 동작을 수행하는 목적이라면, 명시적으로 type="button"을 주어서 사용자 경험을 향상시킨다. 버튼에 명시적인 동작이 없다면 사용자가 버튼을 눌러도 아무 일도 일어나지 않게된다.