전에 1개의 모달창을 공유하기 위한 이벤트 중복 방지 포스트에서 custom 모달창을 공유하기 위한 방법은 너무 복잡하고 많은 인자들을 onModal 함수에 넘겼다. 그리고 계속 btn-cancel과 btn-yes의 이벤트들을 계속 추가해주고 지우는 비효율적인 일을 계속했다.
onModal 함수에서 btn-cancel과 btn-yes이 눌렀을 때의 이벤트를 처리해주는 것보다 해당 버튼이 눌렸을때 특정값을 반환해서 btn-sub와 btn-remove의 이벤트 안에서 바로 처리해줄 수 있다면 더 간단한 일이 될 것이라고 생각했다. (처음에 비동기를 생각하지 못하고 그냥 return을 사용해서 했더니 안되서 포기했었다)
최근에 배운 promise, async, await를 사용하면 btn-cancel과 btn-yes의 이벤트를 기다려주어 btn-sub와 btn-remove 안에서 원하는 이벤트를 처리할 수 있었다.
constructor() {
...
...
this.modal = document.querySelector(".modal-wrapper");
this.modal.querySelectorAll("button").forEach(item =>
item.addEventListener("click", () => {
this.modal.classList.remove("on");
})
);
}
onModal(title) {
return new Promise(resolve => {
this.modal.classList.add("on");
this.modal.querySelector(".btn-cancel").addEventListener("click", () => {
resolve(0);
});
this.modal.querySelector(".btn-yes").addEventListener("click", () => {
resolve(1);
});
})
}
new Promise(function(resolve) => {})
은 작동하지 않고, new Promise(resolve => {})
을 사용해야 작동한다. currentItem.querySelector(".btn-sub").addEventListener("click", async () => {
if(await this.onModal("Remove Item from Cart")) {
// confirm == true 일때 이벤트
currentItem.remove();
} else {
// confirm == false 일때 이벤트
}
});