[React] alert 대신 react-toastify 로 알림창 구현

 

 

💡 alert 대신 react-toastify 를 이용해 알림창을 구현해 보자.

 

npm install --save react-toastify or yarn add react-toastify

 

App.jsx or Index.jsx

최상위 컴포넌트로 가서 ToastContainer 와 css 를 import 해온다.

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

function App() {
  return (
    <>
      <div>
        <Router />
      </div>
      <ToastContainer />
    </>
  );
}

export default App;

 

Login.jsx

알림창을 사용할 컴포넌트로 가서 alert 대신 toast!

import { toast } from "react-toastify";

//...

// alert(`${nickname}님 반갑습니다.`);
toast.success(`${nickname}님 반갑습니다.`);

alert

toast.success

 

❗️ 실패 시

toast.error(`아이디: 4~10자의 영문 소문자, 숫자를 입력해 주세요.`);
// toast.warn(`아이디: 4~10자의 영문 소문자, 숫자를 입력해 주세요.`); 노란색 경고창

toast.error

 

이제 확인 버튼을 누르지 않아도 된다!

 

 

🔗 https://fkhadra.github.io/react-toastify/installation

Installation | React-Toastify