[TIL] 영화 검색 사이트 만들기 (5)

오늘 한 일

• review.js refactoring (closest 메서드 활용)
• 모달창에 입력 값 없을 때 "비밀번호를 입력해주세요" alert 뜨도록 변경
• credit api 추가 (배우 이미지, 이름, 캐릭터 이름)
• css 전체 수정
• 모달창 바깥부분 클릭해도 닫히게 수정! ⭐️

주말이지만 프로젝트가 월요일까지 이기도 하고, 하다보니까 욕심이 나서 여러 기능을 많이 추가했다. 이 중에서 모달창 바깥 부분 클릭해도 닫히게 하는 방법에 대해 알아보자!

의식의 흐름

• 모달창 바깥 부분인 "modal__container" 클래스명을 가지고 있는 요소들에 닫기 버튼을 클릭할 때 실행되는 코드와 동일한 이벤트를 추가하면 되지 않을까?

modal.classList.add("hidden");

• 되긴 된다! 그런데.. 문제는 모달창 ("modal__content") 을 클릭해도 닫힌다는 것이었다.
• 왜그럴까?
• 이는 이벤트 버블링때문에 발생하는 현상이다.
• 이벤트 버블링? : 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상
  

<div class="hidden modal__container"> <!-- 이거도 클릭한 것!-->
  <div class="modal__content"> <!-- 이거 클릭하면-->
    <input
           type="password"
           placeholder="비밀번호를 입력하세요"
           required
           />
    <div>
      <button class="modal__close-btn">취소</button>
      <button class="modal__delete-btn">삭제</button>
    </div>
  </div>
</div>

이벤트 전파

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파(event propagation) 라고 한다.

[출처] 모던 자바스크립트 Deep Dive

• 캡쳐링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
• 타깃 단계 : 이벤트가 이벤트 타킷에 도달
• 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파

e.target; // 유저가 실제로 누른 요소
e.currentTarget; // 이벤트리스너가 달린 곳 = this
e.preventDefault(); // 이벤트 기본 동작을 막아줌.
e.stopPropagation(); // 상위 요소로 퍼지는 이벤트 버블링을 막아줌.

• 콘솔에 찍어보면 더욱 이해가 잘 된다.
• "modal__container" 의 클릭 이벤트에 다음과 같은 코드를 클릭하고 모달창 부분 "modal__content"를 클릭해보았다.

console.log(e.target);
console.log(e.currentTarget);

• 유저가 실제로 클릭한 부분은 모달창 부분("modal__content") 이지만,
• 이벤트리스너가 달린 곳은("modal__container") 였다.
• 그래서 모달창("modal__content") 의 이벤트리스너에 다음과 같은 코드를 추가하였다.

div2.addEventListener("click", (e) => {
    e.stopPropagation();
  });

• 이제 모달창을 클릭해도 닫히지 않고, 모달 바깥부분을 클릭하면 모달창이 잘 닫힌다~!
• 드디어 css 작업을 마무리해서 끔찍한 디자인에서 봐줄만한 디자인이 되었다.

느낀점

• 주말에 작업을 열심히 한 이유는.. 이것 저것 추가하다보니까 점점 욕심이 생겼기 때문이다.
• 개인 과제 해설 들을 때 이벤트 버블링에 대한 개념을 들었었지만 바로 적용하지는 못했었는데, 모달창 바깥 부분 닫히게 할 때 이 개념이 쓰일줄이야. 냅다 적용하기!
• 뭔가 점점 흥미가 생기는 늑김