promise, async, await를 사용한 custom confirm 창 만들기

HYERI ·2023년 4월 28일
0
post-thumbnail

문제

전에 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 함수 안에서 modal을 꺼주는 이벤트를 넣어줄 필요없으므로 constructor 안에 미리 해당 이벤트를 추가해준다.

onModal 함수

    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);
            });
        })
    }
  • promise을 선언하고 btn-cancel을 눌렀을 시 0을 반환하고, btn-yes을 눌렀을 시 1을 반환한다.
  • new Promise(function(resolve) => {})은 작동하지 않고, new Promise(resolve => {})을 사용해야 작동한다.

new Promise(function(resolve) => {})

  • 그냥 function을 사용하게 되면 this는 undefined이기 때문에 this.modal에 접근할 수 없다.

new Promise(resolve => {})

  • 화살표 함수를 사용하면 this는 전역객체를 가리키게 된다. 그래서 this.modal에 접근할 수 있다.

onModal 함수로 confirm으로 이용

currentItem.querySelector(".btn-sub").addEventListener("click", async () => {
    if(await this.onModal("Remove Item from Cart")) {
    	// confirm == true 일때 이벤트
    	currentItem.remove();
    } else {
      	// confirm == false 일때 이벤트
    }
});
  • addEventListener의 콜백 함수에 async 선언을 해주고 onModal을 불러올 때 await을 선언해 resolve 값을 기다린다.
  • 사용자가 둘 중 버튼을 골랐을 때 resolve 값을 반환하고 그때서야 if 문을 실행한다.

참고한 글

0개의 댓글