눈물의 preventDefault💧💦☔️

9rganizedChaos·2021년 11월 14일

🤔 자바스크립트 셀프 QnA

목록 보기

9/9

이제 평생 preventDefault를 잊기는 힘들지 않을까...!
깊은 사연은 지금 여기에 기술할 수 있는 상황이 아니라... 구구절절 사연을 늘어놓을 수는 없지만...
대충 너무 중요했던 채용 프로세스 과정에서, preventDefault에 대한 질문을 받았는데... 정확한 개념이 생각나지 않아버리는 불상사가... 돌이켜보면 preventDefault를 사용해보지 않은 것은 아니었는데... 왜 나는 "직접 사용해본 적이 없어서 잘 모르겠다"라고 대답해버렸을까...

정확한 개념을 인지하고 사용해왔던 것은 아니고, 에러처리하면서 레퍼런스보고 아 이거 쓰면 되는구나! 하고 썼던 것이니, 사실 어설프게 둘러대는 것보다는 모른다고 하는 편이 나았을지도 모른다.
근데 그렇다고 preventDefault를 사용해본 적이 없다고 할 것은 굳이 없었는데... 후회 막급이다.
나같아도 아주아주 중요한 면접인데... 주니어개발자가 와서 preventDefault 별로 사용해본 경험이 없다고 하면, 정말 띠용... 해버릴 듯 싶다.

결국 면접 본 날 이후로 지금까지도 문득 문득 preventDefault 생각이 머리를 스치고...
이불킥하는 기억은 늘어만가고... 지금도 MSWjs 공부하던 중에 예시 코드 다운 받았는데...
아니나다를까 preventDefault ^^* ... 할많하않...

그래서 모자딥다 이벤트 파트 한 번 짚고 넘어간다...😢🌧🌊

DOM 요소들은 각자 고유의 기본 동작이 있다.

a 태그: 클릭시 href 어트리뷰트에 지정된 링크로 이동
checkbox 인풋 태그: 클릭시 체크 또는 체크 해제

이벤트 객체 내의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중단시킨다!

<!DOCTYPE html>
<html>
  <body>
    <a href="https://www.google.com">go</a>
    <input type="checkbox">
    <script>
      document.querySelector("a").onclick = e => {
        // a 요소의 기본 동작을 중단한다.
        e.preventDefault();
      };
      
      document.querySelector("input[type=checkbox]").onclick = e => {
        // checkbox 요소의 기본동작을 중단한다.
        e.preventDefault();
      };
    </script>
  </body>
</html>

위와 같이 코드를 작성해주면, html 요소들의 기본 동작이 작동하지 않게된다!

go라는 innerText를 가진 a 태그를 클릭해도 google로 이동하지 않는다!
go 우측의 체크박스 역시 동작하지 않는다!

그렇다면 어떤 활용사례가 있는가...!

사실 위와 같은 경우라면 그냥 a 태그를 안 쓰면 될듯 싶고...^^*
아래와 같은 상황이라면 preventDefalut의 활용이 좀 더 설득력있지 않을까...?

    <a href="https://www.google.com">
      <div>여기 클릭하면 이동시떼</div>
      <div class="no">여기 클릭하면 이동시나이데</div>
    </a>

위와 같은 구조로 html이 구성되어 있으면 div가 둘 다 a 요소라는 부모객체의 자식들이므로!
둘 모두에게 a요소의 기본 동작이 적용되어 있을 것이다!
이 때 우리는 아래 div요소의 경우 해당 기본 동작을 제거해주고 싶은 것이다.
그럴 때!!

      document.querySelector(".no").onclick = (e) => {
        // a 요소의 기본 동작을 중단한다.
        e.preventDefault();
      };

위와 같이 활용해주면 위 div 요소를 클릭하면 google로 이동하지만, 아래의 경우는 그렇지 않다!!

그런데 왜 preventDefault는 stopPropagation과 함께 세트로 등장하는가 👯‍♂️

"preventDefault를 직접 활용해본 경험이 많이 없다"는 문제의 발언은 대체 무엇 때문이었는가를 고민해보면 하나 짚어지는 이유가 있다. 해당 질문은 사실 처음부터 preventDefault은 무엇인가요? 라는 방식은 아니었고, 이벤트 버블링과 캡쳐링 부터 이어진 질문이었다. 그러다가 후에 preventDefalut와 stopPropagation을 함께 질문을 주셨었는데... 내가 stopPropagation에 너무 너무 익숙한 것을 강조하려던 나머지 잠시 사고~발화 루트가 고장나버려서 오출력을 해버린 게 아니었을까... 뭐 그런 이유라도 떠올려보며 이불킥하는 내 마음을 달래본다...

모쪼록! 그런데 나는 이제와서 궁금해지는 게 왜 늘 자바스크립트 이벤트를 공부할 때, preventDefault와 stopPropagation, 두 메소드가 쌍으로 등장했냐는 것이다!
사실 개념 정의만 놓고 보면 서로 너무 다른 메소드가 아닌가! (preventDefault는 html 요소의 기본 동작 방지, stopPropagation은 이벤트 버블링 방지)
바로 윗부분 코드를 작성해보며 생각한 것은 preventDefault는 물론 다양한 활용 사례가 있겠지만, 이벤트가 자식에게 대물림되는 것을 막는 방식으로 사용되는 경우를 찾아볼 수 있다는 것!

또 다른 preventDefault의 활용 사례는?

사실 내가 코드를 직접 작성하며 자주 접해왔던 활용사례는 오히려 위 코드와 같은 경우가 많았다!
코드의 주석을 해제해보면 다르게 동작하는 것을 볼 수 있다.
form 태그의 submit 후 새로고침 기본동작이 작동하지 않는다!

모쪼록...
이 간단한 메서드를 왜 나는 사용하면서도 미리 제대로 짚어놓지 않았는가... 🙈 🙈 🙈
뭐 후회해도 소용은 없다... 앞으로는 에러핸들링에 시간을 좀 쏟으면서 개발하자...

9rganizedChaos

부정확한 정보나 잘못된 정보는 댓글로 알려주시면 빠르게 수정토록 하겠습니다, 감사합니다!

이전 포스트

자바스크립트 셀프 QnA(8): HOOOAAAArray!

1개의 댓글

Hocheol Jang

2021년 11월 18일

저도 잘 몰랐는데 잘 알게되었습니다
감사합니;다 ㅎㅎ

답글 달기