react-alert 대신 react-toastify 사용해서 알림 표시해보기

react-alert 대신 react-toastify 사용해서 알림 표시해 보기

---

 

 

 

이번 글을 통해 배워갈 내용

1. kimc가 react-alert 대신 react-toasty를 사용하는 이유
2. react-toasty 적용해 보기

 

---

 

react-toasty 쓰는 이유

react-alert의 경우 리액트 18 버전이상에서 설치하는 경우

아래와 같은 에러가 발생합니다

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: solesesteluquis@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.1 || ^17" from react-alert@7.0.3
npm ERR! node_modules/react-alert
npm ERR! react-alert@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

 

해결하는 방법은

2023-10-05 기준 fork 되지 않은 npm을 설치해서 사용하는 것이지만

지속적으로 업데이트되지 않는 모듈을 쓰기보다는

자주 업데이트 되는 모듈을 사용하기로 하였습니다

https://www.npmjs.com/package/@blaumaus/react-alert

@blaumaus/react-alert

 

react toasty는

공식문서에 따르면 아래와 같은 장점이 있습니다

 

    실제 설정이 쉽고, 10초 미만으로 작동시킬 수 있어요!
    매우 쉽게 사용자 정의할 수 있어요.
    RTL(우측에서 좌측으로) 지원
    닫기 위해 스와이프 가능 👌
    스와이프 방향 선택 가능
    선택한 애니메이션 쉽게 사용할 수 있어요. 예를 들어, animate.css와 잘 작동해요.
    토스트 내부에 리액트 컴포넌트를 표시할 수 있어요!
    onOpen 및 onClose 훅 있어요. 둘 다 토스트 내부에서 렌더링 된 리액트 컴포넌트에 전달된 속성에 접근 가능해요.
    프로그래밍 방식으로 토스트를 제거할 수 있어요.
    토스트별로 동작 정의 가능해요.
    창이 포커스를 잃을 때 토스트 일시 중지 가능 👁
    남은 시간을 표시하는 멋진 진행 막대기 있어요.
    토스트 업데이트 가능해요.
    진행 막대기를 NProgress와 유사하게 제어할 수 있어요 😲
    동시에 표시되는 토스트 개수 제한 가능
    다크 모드 지원 🌒
    그리고 더 많은 기능이 있어요!

 

 

react-toasty 설치 및 적용

npm 또는 yarn을 이용해서 설치합니다

$ npm install --save react-toastify
$ yarn add react-toastify

App.tsx 혹은 main.tsx Root인 컴포넌트에 아래와 같이 세팅해 줍니다

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { Provider } from 'react-redux';
import { store } from './store/index.ts';
import { ToastContainer } from 'react-toastify';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
    <ToastContainer />
  </React.StrictMode>,
);

그리고 사용하고자 하는 컴포넌트에 사용해 주면 됩니다

  import React from 'react';

  import { toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function MyButton(){
    const notify = () => toast("매우 쉬워요!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
      </div>
    );
  }

 

 

https://fkhadra.github.io/react-toastify/introduction

 

 

참조 및 인용

https://github.com/fkhadra/react-toastify

GitHub - fkhadra/react-toastify: React notification made easy 🚀 !

https://fkhadra.github.io/react-toastify/introduction

React-toastify | React-Toastify

 

---