[React] 폼 태그 버튼, 일반적인 버튼 차이

 

1. 폼태그 안의 버튼 ( type = "submit" 이 설정된 버튼)

 

 

• 폼 제출을 위해 사용한다.
• 폼태그 안에 위치하며 폼의 기본 동작을 실행하도록 돕는다.
• 폼을 제출하면 폼태그에 설정된 ' onSubmit ' 핸들러 함수가 호출된다.
• 폼의 데이터를 제출하거나 서버로 데이터를 전송할 때 사용된다.

const handleClick = () => {
  e.preventDefault(); //페이지 새로고침 
};

return (
  <form onSubmit={handleSubmit}>
  <input type="text" />
  <button type="submit">Submit</button>
</form>
);

* 폼태그 내에서 버튼 생성시 버튼에 타입을 생략하면 type="submit"이 자동으로 설정 된다.

폼태그 내에서 일반적인 버튼을 만들고 싶으면 type="button"으로 명시해야됨

 

 

 

2. 일반적인 버튼 ( ' onclick ' 이벤트가 있는 버튼)

 

 

• 폼 제출과는 관련이 없는 작업에 사용된다. ex) 다른 기능 실행, 화면 전환
• 폼태그 바깥에 위치하며 폼과 독립적으로 동작한다.
• 버튼을 클릭하면 버튼에 설정된 ' onClick ' 핸들러 함수가 호출된다.

const handleClick = () => {
  // 폼 제출과 무관한 작업 수행
};

return (
  <div>
    <button onClick={handleClick}>Click Me</button>
  </div>
);