글 쓴 계기

새싹프론트엔드 실습문제중에 계산기를 만드는 실습이 있었다.

해당문제

기능 구현 자체는 그냥저냥 했는데 어떤 버튼을 눌러도 바로 새로고침되는 문제가 있었다. 각 버튼을 눌렀을시 해당 버튼기능이 적용된 후에 새로고침이 됐어서 어디가 문제인지 더 감이 안잡혔다.

코드를 봐도 문제가 없어 보였고 개발자도구를 봐도 오류가 없...지는 않고 있긴 했는데 이거랑은 상관없는 문제였다. 실제로 오류 해결이후에도 새로고침 현상은 지속되었다.
찾아보니 <button> 태그의 타입적용으로 인한 문제였다.

button Type

button에는 기본적으로 3가지 타입이 있다.

• submit
• reset
• button

아무 값도 지정하지 않으면 기본값은 submit으로 되어있다.

<button></button> === <button type="submit"></button>

기본적으로 이런방식으로 적용된다는 것이다. 따라서 form 태그 안에 button 태그를 넣고 타입을 설정하지 않으면 버튼을 누를때마다 새로고침 된다.

그러므로 button 태그를 쓸때 type을 설정해주면 가독성도 좋고 예상치 못한 상황도 방지할 수 있다.

<button type="button"></button>

나 역시 input 태그를 사용하느라 form 태그를 사용했는데 별 생각없이 범위안에 button 태그를 넣어서 발생한 문제였다. form 태그의 범위를 재조정 해주니 새로고침도 간단해결되었다.

사실 form 태그 안에 button 태그를 넣는 경우가 흔치않은 경우라 타입을 굳이 설정안해도 대부분은 문제가 없겠지만 사람 일은 모르는 거다. button에 타입쓰는 습관을 가져야겠다.

참고 자료

https://nykim.work/96