PopupModal

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

05 PopupModal TIL
1. submit event를 받았을 때 버튼이 target이 되지 않는 현상

<form class="popup-form">
  <input type="text" class="popup-input" />
  <button class="popup-button-ok">OK</button>
  <button class="popup-button-cancel">Cancel</button>
  <button class="popup-button-x">X</button>
</form>
;

위 코드에서는 popup을 종료하는 button이 submit 안에 들어 있다. 이 상태에서 submit 이벤트를 받아서 종료하려고 하면 submit에서 button이 e.target이 되지 않는다. 따라서 submit 이벤트가 필요한 부분과 필요하지 않는 부분을 나누었다.

<form class="popup-form">
  <input type="text" class="popup-input" />
  <button class="popup-button-ok">OK</button>
</form>
<div class="popup-delete">
  <button class="popup-button-cancel">Cancel</button>
  <button class="popup-button-x">X</button>
</div>

popup-form 에서는 submit event가 발생하면 입력 필드의 텍스트를 입력받아 화면에 출력한다. 그리고 popup-delete 에서는 click event가 발생하면 hidden 클래스를 추가해 popup을 없앤다.

2. 리펙토링
위 방법에서는 div 태그 안에서 2개의 버튼이 있었다. 두 버튼은 공통된 기능을 가지고 있었지만, 배치구조대로 html을 바꾸어야 할 필요를 느꼈다.

<form class="popup-form">
  <input type="text" class="popup-input" />
  <button class="popup-button-ok">OK</button>
  <button class="popup-button-cancel">Cancel</button>
</form>
<button class="popup-button-cancel button-x">X</button>

위와 같이 하게 된다면 cancel 버튼을 클릭했을 시, submit event가 발생하게 된다. 이를 위해서, button에 type을 주어 submit event가 필요한 버튼과 구분했다.

<form class="popup-form">
  <input type="text" class="popup-input" />
  <button type="submit" class="popup-button-ok">OK</button>
  <button type="button" class="popup-button-cancel">Cancel</button>
</form>
<button class="popup-button-cancel button-x">X</button>

그리고 popup-button-cancel 클래스를 주어 querySelectorAll로 묶일 수 있도록 한 뒤, event listener를 달아주었다.

const $popupButtonCancel = document.querySelectorAll('.popup-button-cancel');

[...$popupButtonCancel].forEach($button => {
  $button.addEventListener('click', closeModal);
});

<배운점>
++ HTML구조에 따라서 Javascript의 코드 방식이 바뀌는 것을 체감했다. 앞으로 HTML에 JS 의존성을 줄이는 방식을 추구해야 겠다.