토스트

토스트

토스트는 잠시 동안 화면에 표시되는 간결한 메시지 컴포넌트예요. "저장 완료" 같은 짧은 알림을 사용자에게 전달할 때 써요. Radix UI의 토스트 프리미티브 위에 만들어져 있어서, 화면 구석에 자연스럽게 나타났다가 사라지는 동작을 기본으로 제공해요.

출처: 문서

본문

설치하기

CLI Manual

다음 명령어를 실행해 주세요.

npx shadcn@latest add toast

Toaster 컴포넌트를 추가해 주세요.

루트 레이아웃에 <Toaster />를 넣어 주세요.

import { Toaster } from "@/components/ui/toaster"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-toast

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

toast.tsx

toaster.tsx

use-toast.tsx

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

Toaster 컴포넌트를 추가해 주세요.

import { Toaster } from "@/components/ui/toaster"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

사용하기

useToast 훅이 반환하는 toast 함수를 사용해서 토스트를 띄울 수 있어요.

import { useToast } from "@/hooks/use-toast"

export const ToastDemo = () => {
  const { toast } = useToast()

  return (
    <Button
      onClick={() => {
        toast({
          title: "Scheduled: Catch up",
          description: "Friday, February 10, 2023 at 5:57 PM",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

토스트를 여러 개 동시에 표시하고 싶다면, use-toast.tsx 안의 TOAST_LIMIT 값을 조정해 주세요.

예시

단순

제목 포함

액션 포함

파괴적(Destructive)

toast({ variant: "destructive" })처럼 variant를 주면 파괴적(위험) 토스트를 표시할 수 있어요.

더 알아보기 (Learn more)