-
사용자가 액션을 취했을 때 성공이나 실패여부를 보여주는 라이브러리는 여러가지가 있다
그 중 `toastify` 라이브러리와 `react-hot-toast` 라이브러리 두개를 소개해 보려고 한다.
1. toastify 라이브러리
toast 라이브러리는 커스텀이 가능하고, 쉽고 직관적이게 설정할 수 있다.
설치
npm install --save react-toastify //또는 yarn add react-toastifyReact에서는 최상위 index.jsx 컴포넌트에 추가한다.
import App from './App.jsx'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/ReactToastify.css'; ReactDOM.createRoot(document.getElementById('root')).render( <> <App /> <ToastContainer /> </> )next 14v에서는 최상위 layout에 선언해준다.
import "@/app/globals.css"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="ko"> <body> <ToastContainer position="top-left" autoClose={1000} /> {children} </body> </html> ); }기본속성은 오른쪽 위에 선언되어 있는데
속성값으로 설정해두어 변경할 수 있다.
position 속성
top-left 왼쪽 위에 생성 top-right 오른쪽 위에 생성 (기본값) top-center 가운데 위로 생성 bottom-left 왼쪽 아래 생성 bottom-right 오른쪽 아래 생성 bottom-center 가운데 아래 생성 type 속성
info 
success 
warning 
error 
default 
테마
light 기본값 dark 
colored 
Docs 에서 직접 확인해 볼 수 있다.
Installation | React-Toastify
Requirements
fkhadra.github.io
react-toastify
React notification made easy. Latest version: 10.0.5, last published: 5 months ago. Start using react-toastify in your project by running `npm i react-toastify`. There are 2566 other projects in the npm registry using react-toastify.
www.npmjs.com
2. react-hot-toast 라이브러리
react-hot-toast도 마찬가지로 쉽고 빠르게 적용해 볼 수 있다.
toastify와 다른점은 커스텀을 할 때 Tailwind CSS 커스텀이 가능하다는 점이 있다.
Tailwind CSS를 사용하고 커스텀을 사용하려고 한다면, hot-toast가 더 적합할 수 있다.
설치
npm install react-hot-toast //또는 yarn add react-hot-toastReact에서는 최상위 index.jsx 컴포넌트에 추가한다.
import App from './App.jsx'; import toast, { Toaster } from 'react-hot-toast'; ReactDOM.createRoot(document.getElementById('root')).render( <> <App /> <Toaster /> </> )next 14v에서는 최상위 layout에 선언해준다.
import toast, { Toaster } from "react-hot-toast"; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="ko"> <body className={notoSansKr.className}> {children} <Toaster /> </body> </html> ); }Docs에서 잘 나와있어서 속성들을 적용해 볼 수 있다.
Docs
react-hot-toast - The Best React Notifications in Town - react-hot-toast
Add beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.
react-hot-toast.com
react-hot-toast
Smoking hot React Notifications. Lightweight, customizable and beautiful by default.. Latest version: 2.4.1, last published: a year ago. Start using react-hot-toast in your project by running `npm i react-hot-toast`. There are 765 other projects in the npm
www.npmjs.com
'📚 이론정리 > React & Next.js' 카테고리의 다른 글
✏️ Next.js 14v google font 적용하기 (0) 2024.08.21 ✏️ Render로 배포하기(Client, Server) (0) 2024.08.17 ✏️ 폭죽효과 넣기, js-confetti 라이브러리 (0) 2024.08.10 ✏️ Framer-motion 애니메이션 라이브러리 (0) 2024.08.10 ✏️ EmailJS 라이브러리를 활용하여 문의사항 받기 (1) 2024.06.30 댓글
