사용하는 이유?
- 번들 크기가 작다. (가벼운 라이브러리)
- 애니메이션 효과로 시각적 매력을 더해준다.
- 사용하기 쉽고 직관적인 API를 제공한다.
- 즉각적으로 알려주어 사용자 경험 향상!
설치 방법
npm install react-hot-toast사용 방법
Provider 설정 (최상위 컴포넌트)
// provider/toast-provider
"use client";
import { Toaster } from "react-hot-toast";
export const ToastProvider = () => {
return <Toaster />;
};- provider 컴포넌트를 생성해준다.
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider afterSignOutUrl="/">
<html lang="en">
<body className={inter.className}>
<ToastProvider />
<ModalProvider />
{children}
</body>
</html>
</ClerkProvider>
);
}사용하고 싶은 최상위 컴포넌트에 넣어준다.
다양한 타입 정리
toast.success('Successfully created!');
toast.error('An error occurred');
toast.loading('Loading...');// 프로미스 처리
const promise = fetchData();
toast.promise(promise, {
loading: 'Loading...',
success: 'Got the data',
error: 'Error when fetching',
});// 커스텀 스타일
toast('Hello', {
duration: 4000,
position: 'top-center',
style: {
background: '#333',
color: '#fff',
},
}); 
'왜?'