SweetAlert2 고급 기능 & 인터랙션 활용법｜실무 팁 예제 모음

글쓴이 /

SweetAlert2는 단순한 알림창을 넘어 HTML 콘텐츠 삽입, 다중 버튼, confirm 처리, 비동기 제어까지 지원하는 강력한 팝업 라이브러리입니다. 이 글에서는 실무에서 자주 쓰이는 고급 기능과 인터랙션 제어 방법을 정리했습니다. 각 기능은 별도 가이드로 연결되어 있어 바로 실습할 수 있습니다.

👉 SweetAlert2 공식 웹페이지 보러가기

이미지 & HTML 콘텐츠 삽입

👉 상세 가이드는 별도 글: SweetAlert2 이미지 & HTML 콘텐츠 삽입 완벽 가이드

Swal.fire({
  title: '<strong>이벤트 안내</strong>',
  html: '🎉 <b>신규 회원</b>에게 <a href="#">쿠폰 증정!</a>',
  imageUrl: '/images/event.png',
  imageWidth: 400,
  imageAlt: '이벤트 이미지'
});
JavaScript
  • html 옵션으로 텍스트 + 태그 삽입 가능
  • imageUrl, imageWidth 등으로 이미지 삽입

다중 버튼 & 옵션 커스터마이징

👉 상세 가이드는 별도 글: SweetAlert2 다중 버튼 구현과 옵션 커스터마이징｜기본·고급 코드 포함

Swal.fire({
  title: '작업을 계속하시겠습니까?',
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: '저장',
  denyButtonText: '저장 안 함',
  cancelButtonText: '취소'
});
JavaScript
  • showDenyButton, showCancelButton으로 3버튼 구현 가능
  • 각 버튼에 이벤트/콜백을 붙여 다양한 시나리오 구현

Confirm 처리 & 콜백 활용

👉 상세 가이드는 별도 글: SweetAlert2 confirm 사용법｜확인/취소 처리와 콜백 활용 예제

Swal.fire({
  title: '삭제하시겠습니까?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '삭제',
  cancelButtonText: '취소'
}).then((result) => {
  if (result.isConfirmed) {
    //console.log('삭제 실행');
    Swal.fire({
      position: "top-end",
      icon: "success",
      title: "삭제 실행",
      showConfirmButton: false,
      timer: 1500
    });
  }
});
JavaScript
  • then() 안에서 isConfirmed, isDismissed로 처리 분기
  • 실무에서 가장 많이 쓰이는 패턴

확인창 후 콜백 함수 실행

👉 상세 가이드는 별도 글: SweetAlert2 확인창 후 콜백 함수 실행하는 방법 (이벤트 처리 예제 포함)

function deleteItem(id) {
  Swal.fire({
    title: '정말 삭제하시겠습니까?',
    showCancelButton: true,
    confirmButtonText: '삭제'
  }).then((result) => {
    if (result.isConfirmed) {
      performDelete(id); // 콜백 실행
    }
  });
}
JavaScript
  • 함수 내부에서 confirm → 후속 로직(콜백 함수) 호출
  • 삭제, 저장, API 요청 등 실무 처리 시 필수

Promise와 비동기 제어

👉 상세 가이드는 별도 글: SweetAlert2와 Promise 활용해 비동기 흐름 제어하기

Swal.fire({
  title: '데이터 저장 중...',
  allowOutsideClick: false,
  didOpen: () => {
    Swal.showLoading();
    fetch('/api/save')
      .then(() => Swal.fire('저장 완료!'))
      .catch(() => Swal.fire('저장 실패', '', 'error'));
  }
});
JavaScript
  • Swal.showLoading()으로 로딩 상태 표시
  • fetch/axios 등 비동기 작업과 결합하여 UX 개선

SweetAlert2 고급 활용 팁

  • 이미지 + HTML : 프로모션, 이벤트 알림에 적합
  • 다중 버튼 : 선택지 기반 워크플로우 구현 가능
  • Confirm + 콜백 : 삭제/저장 같은 위험 동작 보호
  • Promise : 비동기 API 요청과 UI 결합

마무리

SweetAlert2는 단순 팝업을 넘어서 실무 로직과 직접 연결되는 인터랙션 허브 역할을 할 수 있습니다.
특히 confirm 처리, 다중 버튼, 비동기 제어는 실무에서 매일 쓰이는 기능이므로 꼭 익혀두는 것이 좋습니다.
개별 글을 통해 실제 예제를 따라 하면서 자신만의 팝업 패턴을 만들어보세요.

👉 다음 글: 외부 연동 & 실무 예제 보러가기

위로 스크롤