SweetAlert는 사용자에게 예쁘고 사용하기 쉬운 대화상자를 제공하는 JavaScript 라이브러리입니다. 기본적으로 SweetAlert는 동기적으로 작동하며, 대화상자가 닫힐 때까지 코드 실행이 차단됩니다. 그러나 SweetAlert는 비동기 처리를 지원하기 위한 옵션도 제공합니다.

confirm 옵션 활용하기

SweetAlert의 confirm 메서드를 사용하면 사용자에게 확인 또는 취소를 선택하도록 요청하는 대화상자를 생성할 수 있습니다. 이 때 두 번째 매개변수로 전달되는 콜백 함수를 이용하여 비동기 처리를 수행할 수 있습니다.

swal("Are you sure?", {
  buttons: {
    cancel: "Cancel",
    confirm: "Confirm",
  },
}).then((value) => {
  if (value) {
    // 확인 버튼이 선택된 경우
    // 비동기 작업 수행
  } else {
    // 취소 버튼이 선택된 경우
  }
});

위 예제에서는 SweetAlert의 then 메서드를 사용하여 사용자가 확인 또는 취소 버튼을 선택한 후에 비동기 작업을 수행할 수 있습니다. then 메서드의 콜백 함수로 전달되는 value는 사용자가 선택한 버튼에 따라 true (확인), false (취소) 값으로 설정됩니다.

async/await를 이용한 비동기 처리

SweetAlert를 ES6의 async/await 문법과 함께 사용하면 비동기 처리를 더욱 쉽게 작성할 수 있습니다.

const result = await swal("Are you sure?", {
  buttons: {
    cancel: "Cancel",
    confirm: "Confirm",
  },
}).then((value) => {
  if (value) {
    // 확인 버튼이 선택된 경우
    return true;
  } else {
    // 취소 버튼이 선택된 경우
    return false;
  }
});

if (result) {
  // 비동기 작업 수행
}

위 예제에서는 await 키워드를 사용하여 SweetAlert의 swal 메서드가 반환하는 Promise를 기다린 후에 사용자가 선택한 결과를 result 변수에 저장합니다. 그리고 나서 result 값을 확인하여 비동기 작업을 수행할 수 있습니다.

참고 자료

• SweetAlert 공식 홈페이지
• SweetAlert GitHub 저장소