React.js(7) - SweetAlert2

👩‍💻 SweetAlert2 사용하기

💚 SweetAlert2란?

- 디자인과 기능의 알람창을 제공해준다. 

- 주로 사용자에게 필요한 정보를 알림창으로 출력해주도록 하는 라이브러리이다. 

 

💚 설치

npm install sweetalert2

 

✍ Sweetalert2.js

import React from "react";
import { Component } from "react";
import Swal from "sweetalert2";


class R056_Sweetalert2Basic extends Component {

    componentDidMount() {
        //Swal.fire('1.SweetAlert')
        //alert('2. alert()')
        Swal.fire('1. SweetAlert').then(result => {alert('2. result.value :'+result.value)})
    }
    render() {
        return (
            <h1>sweetalert2</h1>
        )
    }
}

export default R056_Sweetalert2Basic

 

💚 특징

 

- Swal은 비동기적인 코드 라이브러리이다.

Swal.fire('1.SweetAlert')
alert('2. alert()')

이렇게 쓰게되면... sweetlalert2보다 alert가 먼저 동작하게 된다. 이유는 sweetalert2는 비동기적으로 동작하여 Swal.fire() 함수를 실행시켜 놓고 완료 여부에 상관없이 그냥 alert를 동작시키게 된다.

 

 

📌 vs alert() : 동기적 코드

 

- 확인버튼을 누르지 않으면 다음 동작으로 넘어가지 않기 대문에 alert 확인을 누르지 않게되면 영원이 Swal.fire을 동작시키지 않게 됨 

 

 Swal.fire('1. SweetAlert').then(result => {alert('2. result.value :'+result.value)})

프로미스의 then 함수를 사용하여 Swal.fire 함수의 결과값(result)가 반환된다는 조건 하에 alert 함수를 실행시킨다.

- Swal.fire() 함수 알림창에서 OK 버튼을 누르게 되면 result 값이 true로 반환됨

 

 

💚 프로미스란?

- 비동기적 함수를 동기적으로 사용할 수 있도록 하는 것

- then은 이전 함수가 완전히 완료가 되어야 실행이 된다. 

 

🐇 Position

✍ Sweetalert2Position.js

import React, {Component} from 'react';
import Swal from 'sweetalert2';

class R057_Sweetalert2Position extends Component {
    saveAlert = (flag, positionflag, e) =>{
        Swal.fire({
            position:positionflag,
            icon:'success',
            title:flag+'되었습니다.',
            showConfirmButton : false,
            timer:1500
        })

    }

    render() {
        return(
            <>
            <h1>sweetalert2</h1>
            <button onClick={e=>this.saveAlert('저장','center')}>저장</button>
            <button onClick={e=>this.saveAlert('수정', 'bottom-end')}>수정

            </button>
            </>
        )
    }
}

 

📌 saveAlert -Position 메서드 

saveAlert = (flag, positionflag, e) =>{
        Swal.fire({
            position:positionflag,
            icon:'success',
            title:flag+'되었습니다.',
            showConfirmButton : false,
            timer:1500
        })

    }

 

🐤 SaveAlert- Position 메서드 파라미터 설명

 

📁position : positionflag(알림창 위치 설정)

ㄴ top : 중앙상단

ㄴ top-start : 좌측 상단

ㄴ top-end : 우측 상단

ㄴ center : 정중앙

ㄴ center-start : 중앙좌측

ㄴ center-end : 중앙 우측

ㄴ bottom : 중앙하단

ㄴ bottom-start : 좌측 하단

ㄴ bottom-end : 우측 하단 

ㄴ title : 출력 메세지

ㄴ showConfirmButton : 확인 버튼(x 버튼) 출력 여부

ㄴ timer : 몇초 동안 이 alert를 띄울 것인지 

 

 

💚 Confirm 

- 사용자의 실수로 데이터가 삭제되릭 전에 실제 삭제 작업을 실행하기 전에 다시 한 번 확인하는 알림창

import React, {Component} from 'react';
import Swal from 'sweetalert2';

class R058_Sweetalert2Confirm extends Component {

    deletAlert=()=>{
        Swal.fire({
            title:'정말 삭제하시겠습니까?',
            icon:'question',
            showCancelButton : true,
            confirmButtonColor:'#48088A',
            confirmButtonText:'예',
            cancelButtonText:'아니오',
        

        }).then((result) => {
            if (result.value){
                document.getElementById('deletId').remove();
                Swal.fire(
                    'Deleted',
                    'sweetalert2 삭제 완료',
                    'success'
                )
            }
        })
    }
    render() {
        return(
            <>
            <h2>sweetalert2</h2>
            <button onClick={e=>this.deletAlert()}>삭제</button>
            </>
        )
    }

}

export default R058_Sweetalert2Confirm;

 

 

📌 SweetAlert-Confirm 메서드 

deletAlert=()=>{
        Swal.fire({
            title:'정말 삭제하시겠습니까?',
            icon:'question',
            showCancelButton : true,
            confirmButtonColor:'#48088A',
            confirmButtonText:'예',
            cancelButtonText:'아니오',
        

        }).then((result) => {
            if (result.value){
                document.getElementById('deletId').remove();
                Swal.fire(
                    'Deleted',
                    'sweetalert2 삭제 완료',
                    'success'
                )
            }
        })
    }