REACT_Sweetalert2 Confirm

Confirm 사용하기

: 웹 사이트에 삭제 기능을 구현할 때 사용자의 실수로 데이터가 삭제 될 수 있다 

이런 상황을 방지하기 위해 실제 삭제작업을 실행하기 전에 다시 한 번 확인 하는 알림 창을 표시한다

 

- R058_Sweetalert2Confirm.js

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

class R058_Sweetalert2Confirm extends Component {
    deletAlert = (e) => {
        Swal.fire({
            title: '정말 삭제하시겠습니까?',
            icon : 'question',
            showCancelButton : true,
            confirmButtonColor : '#4B088A',
            cancelButtonColor : '#01DF01',
            confirmButtonText : '예',
            cancelButtonText : '아니오'
        }).then((result) => {
            if (result.value) {
                document.getElementById('deleted').remove();
                Swal.fire(
                    'Deleted',
                    'sweetalert2 삭제완료',
                    'success'
                )
            }
        })
    }
    
    render() {
        return(
            <>
            <h1 id='deleted'>sweetalert2</h1>
            <button onClick={e => this.deletAlert()}삭제></button>
            </>
        )
    }
}

export default R058_Sweetalert2Confirm;

 

 

- App.js

import React from 'react';
//import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Sweetalert2Confirm from './R058_Sweetalert2Confirm'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <Sweetalert2Confirm/>
    </div>
  );
}

export default App;

 

 

결과

삭제 버튼을 클릭하면 sweetalert2가 삭제되는 모습이 나온다 실행해봐야지 안다