SweetAlert2 confirm 사용법｜확인/취소 처리와 콜백 활용 예제

글쓴이 /

기본 confirm()보다 더 세련된 확인창을 만들고 싶다면 SweetAlert2를 추천합니다. 이 글에서는 확인/취소 버튼을 활용한 조건 분기와 콜백 처리 방법을 예제로 설명합니다. 실무에서도 바로 적용할 수 있어요!

기존 confirm()의 한계

// 기본 예제
if (confirm("삭제할까요?\n\n삭제 후 복구는 불가능합니다.")) {
  deleteItem(); // '확인' 선택 시 실행
} else {
  editItem(); // '취소' 선택 시 실행
}

// 실 사용 코드
if (!confirm("삭제할까요?\n\n삭제 후 복구는 불가능합니다.")) return false;
JavaScript
  • 텍스트로만 표시 됩니다.
  • UI/UX가 떨어집니다.
  • 커스텀이 거의 불가능합니다.

SweetAlert2 confirm 예제

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
HTML
Swal.fire({
  title: '정말 삭제하시겠어요?',
  text: '이 작업은 되돌릴 수 없습니다.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '삭제하기',
  cancelButtonText: '취소',
}).then((result) => {
  if (result.isConfirmed) {
    // 삭제 로직 실행
    Swal.fire({text:'삭제 완료됨'});
  } else {
    // 취소되었을 때
    Swal.fire({text:'삭제 취소됨'});
  }
});
JavaScript
  • title : 상단 제목
  • text : 본문 설명
  • icon : 아이콘: success, error, warning, info, question
  • showCancelButton : 취소 버튼 표시 여부
  • confirmButtonText : 확인 버튼 텍스트
  • cancelButtonText : 취소 버튼 텍스트
  • then(result) : 사용자가 선택한 후 처리되는 부분

스타일 커스터마이징 팁

Swal.fire({
  title: '정말 삭제하시겠어요?',
  text: '이 작업은 되돌릴 수 없습니다.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '삭제하기',
  cancelButtonText: '취소',
  confirmButtonColor: '#d33',
  cancelButtonColor: '#3085d6',
}).then((result) => {
  if (result.isConfirmed) {
    // 삭제 로직 실행
    Swal.fire({text:'삭제 완료됨'});
  } else {
    // 취소되었을 때
    Swal.fire({text:'삭제 취소됨'});
  }
});
JavaScript
  • 브랜드 컬러에 맞춰 버튼 스타일링 가능
  • confirmButtonColor : 확인 버튼의 색상 변경
  • cancelButtonColor : 취소 버튼의 색상 변경
  • 예제에서는 정상적으로 버튼 색상이 변경 안되는 거 같습니다. 워드프레스의 CSS와 충돌이 발생하는 거 같습니다. 이건 가볍게 무시하셔도 될 거 같습니다.

✅마무리

sweetalert2는 confirm보다 훨씬 UI 면에서 세련되었습니다. 사용자 경험도 향상되며, 비동기 처리, 조건 분기, 커스텀 모두 지원됩니다. 반응형도 완벽 지원으로 전 이제 이것만 사용하고 있습니다. 다음 시간에는 입력값에 대한 처리 부분도 소개해 드리겠습니다.

위로 스크롤