<button>이 정상적으로 작동하지 않던 문제

문제발생

 

파이널 프로젝트에서 입력받은 데이터를 전송하는 방법을  <form>태그 안에 있는 버튼을 누르면 데이터가 전송이 되는 방식으로 구현했었다. <form>안에 여러 개의 버튼을 통해 여러 데이터들을 보내려고 했는데 버튼을 클릭하면 각각의 데이터가 전송되는 것이 아니라 한 데이터만 계속 전송되는 오류가 발생했다. 

한마디로, 의도치 않은 submit이 발생했다. 

 

1) <form> 속의 버튼들이 자동 submit되는 문제 

2) <button>가 버튼의 기능을 못한다.

 

발생 원인

 

두 문제들의 근본적인 원인은 <form>태그의 특성과 <button>태그의 속성을 제대로 알지 못해 일어난 일이였다. 

 

<form>태그는 태그 안에서 입력한 데이터들을 한번에 전송하는 태그인데 나는  '<form>태그를 이용하면 설정한 http메소드에 따라 데이터를 전송한다.' 라고만 알고 있었다. 그러다보니 태그 안에서 AJAX로 아이디 중복을 체크 하고 넘어가야 하는 버튼이 전체 데이터를 전송하게 된 것이다. 

 

그리고 <button>이 버튼의 기능을 하지 못한 것은 버튼을 커스터마이징 하려고 구글링 하면서 버튼들을 수정했었다. 커스터마이징한 버튼이 이뻐서 가져왔는데 해당 코드는 <button>을 사용한게 아니라 <input>태그에 타입을 버튼으로 설정하고 만든 버튼이였다.... <input>태그로 button을 만들면 onclick()를 사용해 동작을 구현해줬어야 하는데 기능 구현한게 없으니 당연히 동작이 안됐다..

 

 

문제 해결

 

결론적으로 해당 오류들은 무작정 코드를 쓰다보니 각각의 태그들이 가진 속성을 이해하지 않고 쓰게 됐고 이로 인해 발생한 오류들이었다. 그래서 각 태그들의 설명을 보고 해결할 수 있었다. 

 

지나가던 팀원분이 내가 당황한 모습 보고 무슨 문제 있냐 물어보셔서 버튼만 누르면 모두 submit된다고 말하니까 <form>태그 안에서 여러개 버튼을 사용하려면 버튼에 타입을 지정해 줘야 한다는 말을 해주고 가셨다.

 

팀원분의 말을 듣고 버튼 태그에 대해서 찾아보면서 알게된 정보는 '<button>의 타입이 "button"이 디폴트가 아니다. 그래서 상황에 맞게 타입을 지정하고 써야한다.' 였다. 버튼의 타입에는 submit, reset, button 이 세가지가 있는데 디폴트 submit이기 때문에 간단하게 버튼을 누르면 바로 데이터 전송을 할 수 있다. 

 

팀원분의 도움으로 태그 특성을 알게 됐는데 저 특성을 안 상태에서 이 문제는 버튼 태그의 문제가 아니라 <form>태그 문제였던것 같다. 위에서 말했듯이 <form>태그는 태그 안에 입력한 데이터를 버튼을 누르면 submit 해주는 태그인데 그 안에 각각 다른 데이터를 가진 버튼들이 여러개 있었으니까 당연히 <form>태그는 자기 일을 열심히 한거고 나는 물음표만 띄운거고...

 

그리고 css 커스텀 하려고 구글링하면서 <input type="button">을 중간 중간 사용하다보니 버튼 태그와 뒤엉켜 있었다.  결국 전체 데이터를 전송하는 경우에 버튼태그를 사용해 전체 데이터를 보내고 나머지 버튼들은 <input type="button">에 onclick()을 사용해서 버튼의 기능들을 구현해 주었다. 

 

 그런데 지금 다시 한다면 <input>태그보단 그냥 버튼 태그 사용해서 onclick()을 사용할 것 같다. <input type="button">의 이점을 모르겠다.  버튼 태그에도 onclick() 넣을 수 있고 애초에 디폴트가 submit이여서 단독 사용할 때  따로 함수를 구현  안하고 깔끔하게 쓸 수 있을꺼 같은데 input 사용한 사람들은 왜 사용한거지??

 

결론

 

문제의 원인은 태그들을 제대로 공부 안하고 사용한 것이였다. 프로젝트 당시 제한 기한내에 내가 담당한 기능들을 구현해야 한다는 생각때문에 주먹구구 식으로 개발해 놓친 부분이 많았던 것 같다. 그리고 기본부터 탄탄해야 응용도 가능하다는 사실을 다시 깨달았다. 

 

 

 

 

참고자료

• 버튼에 타입을 쓰는 이유 (button type="button")