[JavaScript Code] form 태그 리로딩 중지 시키기, a 태그 링크 이동 막기, 마우스 오른쪽 클릭 막기, 드래그 앤 드롭 막기, 특정 키 조합 막기, 터치 이벤트 막기 (막고서 임의의 로직 넣기)

export default function Signup() {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('Submitting!');
    }}>
      <input />
      <button>Send</button>
    </form>
  );
}

form 태그에서 onSubmit을 했을 때 화면 전체가 리로딩 되는데 이걸 e.preventDefault()를 이용해 중지시킬 수 있습니다

 

그 외 기본적으로 가지고 있는 동작을 방지하는 것에 대해서 자세히 알아보자면 아래와 같습니다 (그 외 더 많이 존재)

1. Form 제출
   • 기본적으로 제출하면 폼 데이터가 서버로 전송되지만 폼 제출을 막아서 클라이언트 사이드에서 데이터 검증이나 다른 로직 처리가 가능합니다
2. a태그 링크이동
   • 링크 이동을 막고 모달창 열거나 등 할 수 있습니다
3. 마우스 오른쪽 클릭 메뉴 (컨텍스트 메뉴)
   • 오른쪽 버튼 클릭하면 컨텍스트 메뉴가 나오지만 이걸 막고 내가 원하는 컨텍스트 메뉴를 띄우거나 아예 막아버려서 컨텍스트 메뉴를 사용 못하게 할 수 있습니다
4. 드래그 앤 드롭
   • 요즘 웹브라우저에서 이미지 등을 드래그하면 드래그 앤 드롭이 되는데 이걸 막고 다른 동작을 시킬 수 있습니다
5. 키보드 입력 (Ctrl+S 등...)
   • 특정 키 조합 (Ctrl + S 등...) 따위를 할 때 기본 동작을 막고 사용자가 정의한 동작을 실행시킬 수 있습니다
6. 터치 이벤트
   • 터치 기반 디바이스에서 스크롤, 스와이프와 같은 제스처는 특정 UI 요소에서 다르게 동작하도록 설정할 수 있습니다. 예를 들어, 캐러셀 슬라이드에서 스와이프로 슬라이드를 넘기는 동작을 구현할 때 기본 스크롤 동작을 막기 위해 사용할 수 있습니다