React-toastify 라이브러리

개요

react-toastify는 react 애플리케이션에서 사용자에게 간단한 알림을 제공하는 데 사용되는 라이브러리이다. 이 라이브러리를 사용하면 토스트 스타일의 메시지를 표시하고 사용자 경험을 향상시킬 수 있다. 아래에서 react-toastify의 주요 기능과 사용법에 대해 자세히 살펴보자.

주요 기능

• 토스트 스타일:
  react-toastify는 성공, 경고, 에러 등 다양한 유형의 토스트를 지원하며, 각각에 대한 스타일을 쉽게 설정할 수 있으며 토스트가 생성되는 위치 또한 지정할 수 있다.

• 커스텀화:
  사용자 지정 토스트 컴포넌트를 생성하여 외관 및 동작을 완전히 제어할 수 있다.

• 타이머 및 자동 닫힘:
  토스트 메시지를 자동으로 닫히게 설정하거나 타이머를 조정할 수 있다.

• 이벤트 핸들링
  열림, 닫힘 등의 이벤트에 대한 핸들러를 등록할 수 있다.

설치

npm install react-toastify

기본 사용법

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

const Example = () => {
  const notify = () => toast.success('안녕하세요!');

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

export default Example;

<ToastContainer> : 토스트 알림을 렌더링하기 위한 컨테이너 컴포넌트이다. 애플리케이션 최상위에 한 번만 렌더링해야 하며, 초기화를 한다고 생각하면 된다.

toast.success, toast.error, toast.warn, toast.info: 각각 성공, 에러, 경고, 정보에 해당하는 토스트를 띄우는 함수이다.

커스텀하게 사용하기

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

const CustomToast = ({ closeToast }) => (
  <div>
    커스텀 토스트 컴포넌트
    <button onClick={closeToast}>
      닫기
    </button>
  </div>
);

const MyComponent = () => {
  const notify = () => toast(<CustomToast />, { autoClose: 5000 });

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

export default MyComponent;

토스트 사용 예시는 react-toastify의 공식문서에서 직접 해볼 수 있다.