[React/Next.js] <button> 태그 속성에 관하여

왜인지 이미지 업로드를 할때 폼 제출이 되는 오류가 있었다. 그 이유를 제미나이의 힘을 빌려 해결하였다. 

 

 

제미나이가 진단한 오류의 이유는 <button>태그의 속성에 있었다.

 

• HTML <button>의 기본 동작: HTML <button> 태그는 type 속성을 지정하지 않으면 form 내에서 type="submit"으로 동작하는 것이 기본이다.(중요*)
• 결론: <UploadButton>을 클릭하면, 브라우저가 "폼을 제출하라"는 명령으로 인식하여 handleSubmit이 호출되었던 것이다.

 

 

해결방법

<button> 태그의 type 속성을 type="button"으로 명시적으로 지정한다.

 

// 수정 전
<UploadButton onClick={onClickUpload}>
// 수정 후
<UploadButton type="button" onClick={onClickUpload}>

 

 

 

• <img /> 태그는 괜찮은 이유: <UploadImage> 컴포넌트는 img 태그이므로 이 문제와 무관하다.
• 개발 습관 제안: form 태그 안에 있는 <button>을 만들 때는 의도치 않은 제출을 막기 위해 항상 type="button"을 습관적으로 추가하는 것이 좋다.

 

마지막으로 styled-components 쓰면 
export const UploadButton = styled.button.attrs({ type: "button", })

` width: 78px; height: 78px; background-color: #bdbdbd; margin-right: 24px; outline: none; border: none; cursor: pointer; `;

이렇게 style 파일 안에서도 타입 속성을 지정할 수 있다고 한다.