[React] 토스트 알람창으로 alert 대체하기

개발을 하다보면 alert를 활용하여 알람을 띄어주는 경우가 생긴다. 이를 아래와 같이 조금 더 예쁘게 꾸며보자.

 

 

 

 

react-toastify 라이브러리를 활용하면 위와같은 토스트를 쉽게 만들 수 있다.

 

 

사용방법도 매우 간단하다.

 

 

 

import React from 'react';

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

function App() {

  const notify = () => toast.warning('Wow so easy!');

  return (
    <>
     <button onClick={notify}>Notify!</button>
     
      <ToastContainer
      position="top-center"
      autoClose={2000}
      hideProgressBar={false}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
      theme="light"
    />
    </>
  );
}

export default App;

 

최상위 컴포넌트에 다음과 같이 ToastContainer를 추가해 준 후, toast함수로 호출만 해주면 쉽게 생성된다.

꼭 css파일을 넣어줘야 잘 적용이 된다.

 

 

https://fkhadra.github.io/react-toastify/introduction/

React-toastify | React-Toastify

옵션들또한 다양하게 제공해주고 있는데, 위 사이트들에서 데모를 확인해 보는것도 가능하다.