모달창 라이브러리 - sweetalert

참고싸이트

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

모달을 조금 쉽게 만드는 방법이 없을까?

바로 있습니다. sweetlibrary를 사용하면 됩니다.

설치법

npm install sweetalert2

import

import Swal from 'sweetalert2';

import Swal from 'sweetalert2';

const Landing = () => {
  const handleAlertButtonClick = () => {
    Swal.fire({
      icon: 'warning',
      title: '경고입니다. 돌아가세요',
    });
  };

  const handleConfirmButtonClick = () => {
    Swal.fire({
      icon: 'warning',
      title: '삭제하시겠습니까?',

      showCancelButton: true,
      confirmButtonText: '확인',
      cancelButtonText: '취소',
    });
  };
  return (
    <div style={{ textAlign: 'center', marginTop: 70 }}>
      {/* <p>랜딩페이지</p> */}
      <button onClick={handleAlertButtonClick}>Alert</button>
      <button onClick={handleConfirmButtonClick}>Confrim</button>
    </div>
  );
};

export default Landing;