❓ Information

e.preventDefault();는 언제 사용할까?

❗ Relevant data

📦 Information Resources

[tistory: # e.preventDefault();의 역할과 언제 사용해야 할까?](# e.preventDefault();의 역할과 언제 사용해야 할까?)

🔰 Content ->

1️⃣ 폼 제출 방지 (form의submit이벤트)

📌 기본 동작

자동으로 페이지가 새로고침되면서 폼 데이터를 서버로 전송
하지만 JavaScript에서 데이터를 비동기 처리하고 싶다면, 기본 제출 동작을 막고 직접 API 요청을 보내야 함

2️⃣ a 태그의 기본 링크 이동 방지

📌 기본 동작

자동으로 해당 페이지로 이동
하지만 SPA(Single Page Application)에서는 페이지 전체를 새로고침하지 않고, 특정 부분만 변경해야 함

3️⃣ 드래그 앤 드롭 이벤트 제어

📌 기본 동작

해당 파일이 새 창에서 열림
e.preventDefault();를 사용하면 드래그한 파일이 새 창에서 열리는 기본 동작을 방지하고, 원하는 이벤트를 실행할 수 있음

4️⃣ 우클릭 방지 (contextmenu 이벤트)

📌 기본 동작

브라우저의 컨텍스트 메뉴(마우스 오른쪽 버튼 메뉴)가 표시됨
이를 방지하고 커스텀 메뉴를 만들고 싶다면 e.preventDefault();를 사용

결론: e.preventDefault();는 언제 사용할까?


폼 제출	폼이 자동으로 새로고침됨	폼 제출을 막고 API 요청 처리 가능
링크 클릭	페이지 이동	원하는 동작만 실행 (SPA)
드래그 앤 드롭	파일이 새 창에서 열림	파일 업로드 등의 기능 구현 가능
우클릭 (contextmenu)	기본 컨텍스트 메뉴 표시	커스텀 메뉴 표시 가능

즉, e.preventDefault(); 는 기본 동작을 막고, 개발자가 원하는 이벤트 핸들링을 가능하게 해주는 강력한 기능!