[React] Sweet Alert, 이쁜 알림창 띄우기

기존의 alert() 창을 대신해서 이쁜 알림 창을 만들 수 있는 SweetAlert2 입니다.

아래의 이미지는 SweetAlert2 을 사용하여 간단하게 띄운 알림창이미지입니다.

 

사용법

1. sweetalert2 모듈 설치

npm install sweetalert2

2. 사용하려는 페이지에서 Swal 선언

import Swal from "sweetalert2";

3. 사용

alert()창 안에 버튼을 넣고 버튼에 따른 이벤트 처리도 가능합니다.

위의 이미지에 대한 코드입니다.

 Swal.fire({
                    icon: "warning",
                    title: "삭제",
                    text: `[${삭제할 ID 값}] 삭제 하시겠습니까??`,
                    showCancelButton: true,
                    confirmButtonText: "삭제",
                    cancelButtonText: "취소",
                }).then((res) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (res.isConfirmed) {
                     	//삭제 요청 처리
                    }
                    else{
                        //취소
                    }
                });
            })

 

* alert()창에서 입력을 받는다던지, Size크기를 조절한다던지 각종 커스텀이 가능합니다.

https://sweetalert2.github.io/#usage

SweetAlert2