[React] button onClick 시 onSubmit 이 실행되는 문제 해결

 

---

 

 

다음과 같이 회원가입 기능을 개발하던 중 인증코드와 인증코드 확인을 누르면 이 form 을 감싸고 있는 곳에 선언해둔 onSubmit 이 실행되어 비밀번호를 입력하지 않았다고 뜨는 문제가 발생하였다.

 

인증코드 전송버튼과 인증코드 확인 버튼은 onClick을 통해 이벤트를 발생시키도록 하였고 폼 전체의 전송은 onSubmit을 통해 이벤트가 발생한다. 

 

button 에 onClick 발생 시 onSubmit이 발생하는 이유를 Stack overflow 를 통해 찾아봤더니

 onsubmit의 제일 밑에 기본이 되는 함수가 onClick 이어서 라고 한다.

 

 

 

이를 해결하기위해 <button></button>으로 만든 버튼을 <input type="button"/> 으로 변경해주면 된다고 한다.

나는 button을 styled-components를 통해 만들었기 때문에 이부분을 input으로 바꿔주어야 했다.

 

 

 

 

 

수정 전 코드

const StyleEmailConfirmBtn = styled.button`  //이 부분 수정
  width: 100px;
  height: 40px;
  border: solid 1px #ebd500;
  font-family: "Noto Sans KR", sans-serif;
  background-color: white;
  color: #ebd500;
  border-radius: 10px;
  margin-bottom: 10px;
  :hover {
    cursor: pointer;
  }
`;

 

 

수정 후 코드

const StyleEmailConfirmBtn = styled.input.attrs({ type: "button" })` //이 부분 수정
  width: 100px;
  height: 40px;
  border: solid 1px #ebd500;
  font-family: "Noto Sans KR", sans-serif;
  background-color: white;
  color: #ebd500;
  border-radius: 10px;
  margin-bottom: 10px;
  :hover {
    cursor: pointer;
  }
`;

 

 

 

수정 후에는 버튼을 onClick 해도 폼 전체가 onSubmit 되는 문제가 해결되었다!!!

button을 선언하는 방법이 두가지인데 어떻게 선언하느냐에 따라 다른 결과를 낼 수 있다는 점을 다시 한번 배우게 되었다 😎

 

 

 

 

 

 

참고자료

https://stackoverflow.com/questions/56378356/how-do-i-convert-css-to-styled-components-with-inputtype-submit-attribute

How do I convert CSS to Styled-Components with input[type="submit"] attribute?

 

 

---