SweetAlert2는 직관적인 팝업 UI를 제공할 뿐 아니라, Promise 기반의 API를 활용해 비동기 작업 흐름을 깔끔하게 제어할 수 있습니다.
이번 글에서는 SweetAlert2와 JavaScript Promise를 결합해, 팝업의 결과에 따라 후속 작업을 안전하게 처리하는 방법을 살펴보겠습니다.
👉 SweetAlert2 공식 웹페이지 보러가기
SweetAlert2와 Promise의 관계
SweetAlert2는 Swal.fire() 호출 시 Promise 객체를 반환합니다.
이 Promise는 팝업이 닫힌 후 사용자 응답에 따라 resolve 되므로, .then() 구문을 사용하면 비동기 로직을 깔끔하게 연결할 수 있습니다.
Swal.fire({
title: '삭제하시겠습니까?',
text: "이 작업은 되돌릴 수 없습니다.",
icon: 'warning',
showCancelButton: true,
confirmButtonText: '삭제',
cancelButtonText: '취소'
}).then((result) => {
if (result.isConfirmed) {
console.log('사용자가 확인 버튼을 눌렀습니다.');
} else if (result.isDismissed) {
console.log('사용자가 취소 버튼을 눌렀습니다.');
}
});result.isConfirmed→ 확인 버튼 클릭 시 trueresult.isDismissed→ 취소/닫기 시 true
Promise의 이 특성을 사용하면 AJAX 요청, DB 저장 등 후속 비동기 작업을 안전하게 수행할 수 있습니다.- 예제 코드는 console.log()로 로그를 찍었지만, “예제 실행” 버튼에서는 Swal() 알림창으로 처리했습니다.
Promise 체이닝으로 순차 실행
SweetAlert2의 Promise를 다음 작업으로 연결할 수 있습니다.
Swal.fire({
title: '데이터를 서버에 전송하시겠습니까?',
icon: 'question',
showCancelButton: true,
confirmButtonText: '전송'
})
.then((result) => {
if (result.isConfirmed) {
return fetch('/api/send-data', { method: 'POST' });
} else {
throw '사용자가 전송을 취소했습니다.';
}
})
.then(response => {
if (response.ok) {
return Swal.fire('성공', '데이터가 전송되었습니다.', 'success');
} else {
return Swal.fire('실패', '서버 오류가 발생했습니다.', 'error');
}
})
.catch(error => {
console.warn(error);
});- 첫
.then()→ 팝업 결과 확인 - 두 번째
.then()→ AJAX 결과에 따라 새로운 팝업 표시 .catch()→ 사용자 취소나 에러 처리- 예제 실행 버튼 클릭해서 “전송” 선택 시 오류가 발생합니다. fetch api 경로의 파일은 존재하지 않습니다.
개발시에 유효한 경로의 파일로 변경하시면 됩니다.
async/await로 더 깔끔하게
Promise 체이닝이 길어질 경우 async/await 문법이 가독성을 높여줍니다.
async function sendDataFlow() {
const result = await Swal.fire({
title: '데이터를 저장할까요?',
icon: 'question',
showCancelButton: true,
confirmButtonText: '저장'
});
if (result.isConfirmed) {
const response = await fetch('/api/save', { method: 'POST' });
if (response.ok) {
await Swal.fire('완료', '저장이 성공적으로 이루어졌습니다.', 'success');
} else {
await Swal.fire('실패', '저장 중 오류가 발생했습니다.', 'error');
}
}
}
sendDataFlow();Tip
await와 SweetAlert2를 조합하면 사용자 응답 → 서버 작업 → 후속 알림 흐름이 한 눈에 보입니다.
특히 복잡한 로직일수록 async/await 구조가 유지보수에 유리합니다.
실무 활용 팁
- 폼 검증 후 전송 여부 확인 → 입력 값 검증 후 팝업에서 최종 승인
- 데이터 삭제 전 최종 확인 → 오작동 방지
- 결제/구매 단계 안내 → 단계별 Promise 흐름으로 UX 개선
SweetAlert2의 Promise는 단순 팝업 기능을 넘어 사용자 행동 기반의 로직 제어에 최적화되어 있습니다.
마무리
SweetAlert2는 Promise 기반 구조를 통해 팝업과 비동기 로직을 자연스럽게 연결할 수 있습니다.then() 체이닝, async/await 활용, 결과 값에 따른 분기 처리를 익히면 실무에서 팝업을 단순 알림이 아닌 흐름 제어 도구로 활용할 수 있습니다.
정말 예쁜 알림창을 실무에서 아주 잘 사용하고 있습니다. 재미나네요~ ^^