alert창 (react-toast)

yarn add react-toastify

설치 후, 가져오는 방식은 아래를 참고


  import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';

  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }

공식 문서를 참조

React-toastify | React-Toastify

Financial Contributors on Open Collective


      <ToastContainer
        position="top-right"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="light"
      />

toast container 코드를 복사해서

기존의 ToastContainer 대신에 넣으면 됨