REACT_Sweetalert2 Basic

Sweetalert2 Basic 사용하기

: Sweetalert2 패키지는 다양한 디자인과 기능의 알림 창을 지원한다

기본 자바스크립트 alert() 와 같이 사용자에게 필요한 정보를 알림 창으로 표시한다

 

@ 동기는 요청과 결과가 동시에 일어난다는 뜻

비동기는 요청과 결과의 작업 처리 단위를 맞추지 않는다는 뜻

@ 프로미스 : 비동기 함수로 동기적으로 사용할 수 있도록 하는 개념

프로미스 함수 중 then은 이전 함수가 완전히 완료됐을 때 실행된다

 

-프로미스 then 함수를 사용해 Swal.fire() 함수의 결과값(result)이 반환됐을 때 alert()함수를 실행한다 

Swal.fire() 함수 알림 창에서 [OK] 버튼을 누르면 result 값이 true로 반환된다

 

---

먼저 cmd 창을 켜고 

Sweetalert2 설치해준다

C:\Users\학생>cd..

C:\Users>cd..

C:\>cd REACT 14

C:\REACT 14>cd client

C:\REACT 14\client>npm install sweetalert2

설치가 끝나면 npm start

---

- R056_Sweetalert2Basic.js

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

class R056_Sweetalert2Basic extends Component {
    componentDidMount() {
        //Swal.fire('1. SwertAlert')
        //alert('2. alert()')
        Swal.fire('1. SweetAlert').then(result => { alert('2. result.value : ' + result.value) })
    }

    render() {
        return(
            <h1>Sweetalert2</h1>
        )
    }
}

export default R056_Sweetalert2Basic;

 

 

- App.js

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

import Sweetalert2Basic from './R056_Sweetalert2Basic'
//import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

 

결과