React-Toastify를 처음 써보는 사람을 위한 간단 사용법 정리 🧹

생각보다 사용법은 너무 쉬워서 공식문서에서 만드는 것만으로도 사용 가능하다

playground에서 만든 걸 붙여넣기하면 된다~!

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

 

공식문서에서 코드를 빌려보자면, 2가지 조건만 지키면된다.

---

필요 조건

1. ToastContainer 를 한번 렌더링한다. (루트에서 렌더링하는 것이 가장 좋다)

2. import 'react-toastify/dist/ReactToastify.css'; 로 스타일을 불러와야한다. 

  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>
    );
  }

 

유틸함수로 분리해봤다

playground에서 보다싶이 toast에는 띄울 문자열과 option 객체를 받는다.

그런데 매번 toast를 호출할 때마다 같은 option 객체를 전달해서 중복이 발생한다.

그래서 perfomToast라는 유틸함수를 만들어보았다. (ts 사용이 미숙합니다)

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

interface performToastProps {
  msg: string;
  type: 'error' | 'success' | 'warning';
}

const defaultOption: ToastOptions = {
  position: 'top-right',
  autoClose: 2500,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: false,
  draggable: false,
  progress: undefined,
  theme: 'light'
};

let activeToastId: string | null = null;

export const performToast = ({ msg, type }: performToastProps) => {
  if (activeToastId && toast.isActive(activeToastId)) return;
  activeToastId = nanoid();

  const options: ToastOptions = {
    ...defaultOption,
    toastId: activeToastId
  };

  switch (type) {
    case 'error':
      return toast.error(msg, options);
    case 'success':
      return toast.success(msg, options);
    case 'warning':
      return toast.warn(msg, options);
    default:
      return;
  }
};

 

토스트 하나만 뜨도록 수정

그리고 토스트가 한번에 하나만 뜨도록 ToastContainer에 limit={1}을 해두었지만,

보이는 것만 1개가 보일뿐 대기 큐에는 버튼을 여러번 누른만큼 들어가서,

toast가 닫히면 클릭했던 toast들이 계속보였다.

 

해결방법으로 toast에는 개별 id를 지정할 수 있는데, 

toast가 만들어질때마다 새로운 id(nanoid)를 전달하여, 해당 아이디를 가진 토스트가 표시되어있으면 해당 함수를 바로 리턴시켰다.

 

React-toastify | React-Toastify