Toast 메세지

Toast Message (토스트 메세지) 란?

: 사용자가 특정 액션을 취하고 난 후 짧은 시간동안 메세지를 보여주는 박스

import { atom, useRecoilState } from 'recoil'
import recoilKey from '../util/recoilKey'
import { nanoid } from 'nanoid'

export const state = atom<{ message: string; id: string }[]>({
  key: recoilKey('toastState'),
  default: [],
})

export const useToast = () => {
  const [toasts, setToats] = useRecoilState(state)

  const showToast = (message: string) => {
    const id = nanoid()
    setToats([...toasts, { id, message }])
  }

  const removeToast = (id: string) => {
    setToats(toasts.filter((toast) => toast.id !== id))
  }

  return {
    showToast,
    removeToast,
    toasts,
  }
}

참고문헌

1. useToast 훅으로 토스트 메세지 처리하기