e.preventDefault();의 역할과 언제 사용해야 할까?

 

웹 개발을 하다 보면 e.preventDefault();라는 코드를 자주 접하게 됩니다. 이 메서드는 이벤트의 기본 동작을 막는 역할을 하는데, 특히 폼 제출, 링크 이동, 드래그 앤 드롭 등의 기능을 조작할 때 유용합니다. 이번 글에서는 e.preventDefault();의 역할과 실제 사용 사례를 알아보겠습니다.

 

e.preventDefault();란?

e.preventDefault();는 브라우저의 기본 이벤트 동작을 막아주는 함수입니다.

즉, 특정 이벤트(예: click, submit, keydown 등) 발생 시 브라우저가 기본적으로 수행하는 동작을 하지 못하도록 막을 수 있습니다. 이를 통해 개발자는 원하는 방식으로 이벤트를 제어할 수 있습니다.

 

🎯 e.preventDefault();가 필요한 대표적인 상황

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

📌 기본 동작

• <form> 요소에서 submit 버튼을 클릭하면 자동으로 페이지가 새로고침되면서 폼 데이터를 서버로 전송합니다.
• 하지만 JavaScript에서 데이터를 비동기 처리하고 싶다면, 기본 제출 동작을 막고 직접 API 요청을 보내야 합니다.

✅ 예제 코드

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault(); // 기본 제출 방지
  console.log("폼 제출을 방지하고, 원하는 동작을 수행!");
};

return (
  <form onSubmit={handleSubmit}>
    <input type="text" placeholder="이름 입력" />
    <button type="submit">제출</button>
  </form>
);

 

✅ 결과: 폼을 제출해도 페이지가 새로고침되지 않으며, 개발자가 원하는 동작을 실행할 수 있음.

---

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

📌 기본 동작

• 클릭을 누르면 자동으로 해당 페이지로 이동합니다.
• 하지만 SPA(Single Page Application)에서는 페이지 전체를 새로고침하지 않고, 특정 부분만 변경해야 합니다.

✅ 예제 코드

const handleLinkClick = (e: React.MouseEvent) => {
  e.preventDefault(); // 기본 이동 방지
  console.log("링크 클릭, 하지만 이동하지 않음!");
};

return 링크 클릭;

✅ 결과: 클릭해도 실제 페이지 이동 없이 원하는 동작만 실행됩니다.

---

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

📌 기본 동작

• 브라우저에서 파일을 드래그하여 특정 영역에 놓으면, 기본적으로 해당 파일이 새 창에서 열립니다.
• e.preventDefault();를 사용하면 드래그한 파일이 새 창에서 열리는 기본 동작을 방지하고, 원하는 이벤트를 실행할 수 있습니다.

✅ 예제 코드

const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
  e.preventDefault(); // 기본 동작 방지 (파일 새 창 열기 방지)
  console.log("파일을 드래그 중");
};

return <div onDragOver={handleDragOver} className="drop-zone">여기에 파일을 올려놓으세요</div>;

✅ 결과: 파일을 드래그해도 기본 동작(새 창 열기)이 실행되지 않고, 개발자가 원하는 이벤트를 실행할 수 있음.

---

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

📌 기본 동작

• 우클릭하면 기본적으로 브라우저의 컨텍스트 메뉴(마우스 오른쪽 버튼 메뉴)가 표시됩니다.
• 이를 방지하고 커스텀 메뉴를 만들고 싶다면 e.preventDefault();를 사용합니다.

✅ 예제 코드

const handleRightClick = (e: React.MouseEvent<HTMLDivElement>) => {
  e.preventDefault();
  console.log("우클릭 방지! 커스텀 메뉴 표시 가능");
};

return <div onContextMenu={handleRightClick}>이 영역에서 우클릭 방지</div>;

✅ 결과: 우클릭을 해도 기본 컨텍스트 메뉴가 나타나지 않음.

---

🚀 e.preventDefault();를 사용할 때 주의할 점

✅ 1. 무조건 남발하지 않기!

• 사용자의 경험을 해치지 않도록, 필요한 경우에만 사용해야 함.

✅ 2. return false;와 다름

• return false;는 jQuery에서 이벤트 전파(stopPropagation)까지 막아버리는 반면, e.preventDefault();는 기본 동작만 막음.

✅ 3. 반드시 이벤트 객체(e)가 필요

• e.preventDefault();를 사용하려면 이벤트 객체(e)가 반드시 존재해야 함!

 

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

상황기본 동작e.preventDefault();의 역할

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

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