velog 알림창 라이브러리 (React-toastify)

ssssm·2024년 2월 28일

📌소개

React-toastify는 react 웹, 앱에서 사용자에서 알림을 제공하는 라이브러리입. 토이프로젝트를 진행중에 "회원가입 성공", "로그인 성공" 등과 같은 알림을 만들고 싶었습니다. 찾아보니 React-toastify, React-hot-toast 2가지 외부 라이브러리가 있습니다. 2가지를 비교하고 선택한 이유에 대해서 정리한 글이다.

📌다운로드 수 (react-toastify > react-hot-toast)

두 라이브러리는 모두 약 2년 동안 사용량이 증가하고 있으나, 다운로드 수를 비교하면 react-toastify가 약 2배 정도 더 많은 것으로 나타납니다.

📌사용 방법 및 문서화 (react-toastify = react-hot-toast)

두 라이브러리의 사용 방법은 매우 간단하며, 문법도 유사합니다. 또한, 두 라이브러리 모두 잘 문서화되어 있습니다.

  //react-toastify
  import React from 'react';
  import { ToastContainer, toast } from 'react-toastify';

  import 'react-toastify/dist/ReactToastify.css';
  // minified version is also included
  // import 'react-toastify/dist/ReactToastify.min.css';

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

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

  //react-hot-toast
  import toast, { Toaster } from 'react-hot-toast';

  const notify = () => toast('Here is your toast.');

  const App = () => {
    return (
      <div>
        <button onClick={notify}>Make me a toast</button>
        <Toaster />
      </div>
    );
  };