🍞 React‐Toastify 중복 렌더링 방지하기

• 공식 사용법

🚨 문제 상황

• 이전에는 동일한 문제에 대한 toast 메시지가 연속해서 화면에 보여졌고, 보여지는 최대 개수를 1개로 제한할 경우 시간차로 동일한 메시지가 보이는 문제가 있었다.
• 예를 들어, 글자수 최소값을 만족하지 못한 상태로 제출 버튼을 연속해서 클릭할 경우 동일한 오류에 대한 toast 메시지가 5초 간격으로 계속 렌더링 되었다.

👍 해결 방법

• React-Toastify 라이브러리에서 자체적으로 중복 방지를 위한 기능인 custom ID를 지원해주고 있다.
• 기존에 toastify의 두 번째 인자로 보내던 객체에 toastId 키 값을 가지는 속성을 추가해주면 된다

toast(message, {
  toastId: "customId"
})

🤔 만약 해당 toast 창이 이미 활성화되어 있는지를 확인하고 싶다면?

• 만약 위에서처럼 custom toast ID를 전다랄 수 없는 상황이라면 toast.isActive() 함수를 호출하여 해당 toast 객체가 이미 화면에 보여지고 있는지를 확인할 수 있다.

const toastId = React.useRef(null);

const notify = () => {
    if(! toast.isActive(toastId.current)) {
      toastId.current = toast("I cannot be duplicated!");
    }
  }