[ React ] react-toastify 알림 메시지

react-toastify 알림 메시지

 

 

react-toastify는 React 애플리케이션에서 사용자에게 간단하게 알림 메시지를 표시할 수 있게 해주는 라이브러리입니다.  

 

react-toastify

 

 

 

https://www.npmjs.com/package/react-toastify

react-toastify

 

 

1. react-toastify 라이브러리를 설치하고 사용하여 API 호출 시 알림을 더 직관적이고 예쁘게 표시할 수 있습니다.
2. 비동기 함수에서 promise 처리 시 toast 메시지를 성공/실패 상황에 맞게 표시할 수 있습니다.
3. react-toastify 패키지를 사용하면 간단하게 토스트 메시지를 구현할 수 있으며, 메시지 위치, 중복 생성 방지, 닫기 버튼/시간 바 제거, 자동 종료 시간 설정 등의 핵심 기능을 제공합니다.

 

 

 

설치

npm install react-toastify


yarn add react-toastify

 

 

 

기본설정 

애플리케이션의 루트 컴포넌트에 ToastContainer를 추가해야 합니다. 일반적으로 App.js 또는 index.js 파일에 추가합니다.

 

// App.js
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div>
      <ToastContainer />
      {/* 나머지 애플리케이션 컴포넌트 */}
    </div>
  );
}

export default App;

 

 

토스트 알림 트리거

toast 함수를 사용하여 토스트 알림을 트리거할 수 있습니다. toast 함수는 다양한 종류의 알림을 지원합니다.

 

import React from 'react';
import { toast } from 'react-toastify';

function ExampleComponent() {
  const notify = () => {
    toast("기본 알림!");
    toast.success("성공 알림!", {
      position: toast.POSITION.TOP_CENTER
    });
    toast.error("오류 알림!", {
      position: toast.POSITION.TOP_RIGHT
    });
    toast.info("정보 알림!", {
      position: toast.POSITION.BOTTOM_LEFT
    });
    toast.warning("경고 알림!", {
      position: toast.POSITION.BOTTOM_RIGHT
    });
  };

  return (
    <div>
      <button onClick={notify}>토스트 알림 보기</button>
    </div>
  );
}

export default ExampleComponent;

 

설정 옵션

react-toastify는 다양한 설정 옵션을 제공합니다. 예를 들어, 자동 닫힘 시간, 위치, 스타일 등을 설정할 수 있습니다.

toast("기본 알림!", {
  position: "top-right",
  autoClose: 5000, // 5초 후 자동 닫힘
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: undefined,
});

 

 

커스텀 스타일

CSS를 사용하여 토스트의 스타일을 커스터마이징할 수 있습니다. ToastContainer에 대한 클래스를 정의하고 이를 적용할 수 있습니다.

 

import './CustomToastStyles.css';

function App() {
  return (
    <div>
      <ToastContainer
        toastClassName="custom-toast"
        bodyClassName="custom-body"
      />
      {/* 나머지 애플리케이션 컴포넌트 */}
    </div>
  );
}

export default App;

 

/* CustomToastStyles.css */
.custom-toast {
  background-color: #333;
  color: white;
}

.custom-body {
  font-size: 16px;
}

 

 

전체 예제

다음은 react-toastify를 사용한 전체 예제입니다.

 

// App.js
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import ExampleComponent from './ExampleComponent';

function App() {
  return (
    <div>
      <ToastContainer />
      <ExampleComponent />
    </div>
  );
}

export default App;

// ExampleComponent.js
import React from 'react';
import { toast } from 'react-toastify';

function ExampleComponent() {
  const notify = () => {
    toast("기본 알림!");
    toast.success("성공 알림!", {
      position: toast.POSITION.TOP_CENTER
    });
    toast.error("오류 알림!", {
      position: toast.POSITION.TOP_RIGHT
    });
    toast.info("정보 알림!", {
      position: toast.POSITION.BOTTOM_LEFT
    });
    toast.warning("경고 알림!", {
      position: toast.POSITION.BOTTOM_RIGHT
    });
  };

  return (
    <div>
      <button onClick={notify}>토스트 알림 보기</button>
    </div>
  );
}

export default ExampleComponent;

 

 

 

 ex )

function MyComponent() {
  const handleClick = () => {
    toast('Hello, World!');
  };

  return (
    <div>
      <button onClick={handleClick}>Show Toast</button>
    </div>
  );
}

 

• 위치 설정: position 옵션을 사용하여 Toast 메시지의 위치를 설정할 수 있습니다.
• 최대 표시 개수 설정: limit 옵션을 사용하여 화면에 표시되는 Toast 메시지의 최대 개수를 설정할 수 있습니다.
• 자동 종료 시간 설정: autoClose 옵션을 사용하여 Toast 메시지가 자동으로 사라지는 시간을 설정할 수 있습니다.
• 닫기 버튼 및 시간 바 제거: closeButton 및 progress 옵션을 사용하여 닫기 버튼과 시간 바를 제거할 수 있습니다.

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const handleClick = () => {
    toast('Hello, World!', {
      position: toast.POSITION.BOTTOM_CENTER,
      limit: 1,
      autoClose: 4000,
      closeButton: false,
      progress: false,
    });
  };

  return (
    <div>
      <ToastContainer />
      <button onClick={handleClick}>Show Toast</button>
    </div>
  );
}

 

 

성공/실패 상황에 따른 Toast 메시지 표시

비동기 함수에서 Promise 처리 시 성공/실패 상황에 따라 다른 Toast 메시지를 표시할 수 있습니다

 

import { toast } from 'react-toastify';

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    toast.success('Data fetched successfully!');
    return data;
  } catch (error) {
    toast.error('Error fetching data.');
    throw error;
  }
}

 

 

추가 기능: 커스텀 Toast 메시지 만들기

react-toastify는 다양한 커스텀 옵션을 제공하여 Toast 메시지의 모양과 동작을 원하는 대로 설정할 수 있습니다. 예를 들어 Toast 메시지에 아이콘을 추가하거나, 버튼을 포함시키는 등의 작업이 가능합니다.

 

import { toast } from 'react-toastify';
import { FaCheckCircle, FaExclamationCircle } from 'react-icons/fa';

const successToast = () =>
  toast.success(
    <div>
      <FaCheckCircle />
      <span>Data saved successfully!</span>
    </div>,
    {
      position: toast.POSITION.TOP_RIGHT,
      autoClose: 3000,
    }
  );

const errorToast = () =>
  toast.error(
    <div>
      <FaExclamationCircle />
      <span>Error saving data.</span>
      <button onClick={() => toast.dismiss()}>Dismiss</button>
    </div>,
    {
      position: toast.POSITION.TOP_RIGHT,
      autoClose: false,
    }
  );

 

 

 

---

 

 

toast("This is a custom toast", {
  position: "top-center",
  autoClose: 3000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: undefined,
  theme: "dark"
});

 

 

position	알림이 표시되는 위치	"top-right"
autoClose	자동으로 닫히는 시간 (ms) 또는 false로 자동 닫힘 비활성화	5000 ms
hideProgressBar	진행 바를 숨김	false
closeOnClick	클릭 시 알림 닫기 가능 여부	true
pauseOnHover	마우스가 호버링할 때 타이머 일시 중지 여부	true
draggable	알림을 드래그하여 닫을 수 있도록 설정	true
progress	진행 바의 수동 제어 (0에서 1 사이)	undefined
pauseOnFocusLoss	브라우저 창을 벗어나면 타이머 일시 중지 여부	true
newestOnTop	새로운 알림이 기존 알림 위에 표시되는지 여부	false
rtl	알림 메시지를 오른쪽에서 왼쪽으로 표시	false
className	전체 알림에 적용할 CSS 클래스	""
bodyClassName	알림 메시지 본문에 적용할 CSS 클래스	""
progressClassName	진행 바에 적용할 CSS 클래스	""
icon	알림에 표시할 아이콘	기본 아이콘
transition	알림 애니메이션 효과	Slide
limit	동시에 표시할 수 있는 최대 알림 수	undefined
theme	알림 메시지 테마 (light, dark, colored)	"light"