버튼태그에서 type="button" 사용 이유(버튼은 기본적으로 submit(폼 제출))

개요

폼 내부에 여러 버튼이 있을 때, 특정 버튼을 클릭해도 폼이 제출되지 않도록 하기 위해 type="button" 속성을 사용한다.

문제점

기본적으로 <button> 태그는 type="submit"으로 간주된다. 따라서 폼 내부의 버튼을 클릭하면 폼이 제출되고, 모든 필드에 대한 유효성 검사가 실행되어 에러 메시지가 나타날 수 있다.

해결책

type="button" 속성을 버튼에 추가하면 해당 버튼을 클릭해도 폼이 제출되지 않는다. 이를 통해 이벤트를 독립적으로 처리할 수 있다.

<button type="button" onClick={handleClick}>
  중복 확인
</button>

사용 예시

중복 확인 버튼, 리셋 버튼 등 폼 제출과 관련 없는 버튼에 type="button"을 사용하여 폼 제출을 방지하고 개별 이벤트를 처리한다.

이렇게 하면 버튼 클릭 시 폼이 제출되지 않고, 원하는 로직을 수행할 수 있다.