[React-Toastify] 토스트 기능 구현해보기

사이드 프로젝트 Linkey를 진행하면서 토스트 기능을 React + Typescript에서 구현해보았고, 그 과정을 정리해보았습니다!

 

라이브러리 선택 과정

React Bootstrap과 react-toastify라는 두 가지 선택지 중에서 최종적으로는 React-Toasitify  라이브러리를 선택하였는 데,

 

현재 개발 중인 사이드 프로젝트가 디자이너나 기획자가 없는 상태에서 프론트 1명과 백엔드 1명이 진행하는 프로젝트이다 보니 UI적으로 임펙트가 부족하다는 느낌이 들어 React Bootstrap에 애니메이션을 추가해서 구현하는 것보다는 빠른 개발을 위해 Node.js 패키지 (React-Toasitify)를 선택하게 되었다.

 

• React Bootstrap > Toasts

Toasts | React Bootstrap

• Node.js Package > React-Toasitify

React-toastify | React-Toastify

 

실행화면

 

설치 및 사용방법

• 설치

npm i react-toastify

react-toastify

• 사용방법
  • /element/Toast.tsx에서는 props로 type과 text를 전달받아 toast 알람 종류(type과 switch)와 세부 내용(text)을 설정해줄 수 있도록 하였다.

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

interface Props {
  text: string;
  type: string;
}

const autoClose = 1000;

export const notify = ({ type, text }: Props) => {
  switch (type) {
    case "default":
      toast(text);
      break;
    case "success":
      toast.success(text);
      break;
    case "warning":
      toast.warning(text);
      break;
    case "error":
      toast.error(text);
      break;
  }
};

const Toast = () => {
  return (
    <ToastContainer
      position="top-center"
      autoClose={autoClose}
      hideProgressBar
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss={false}
      draggable
      pauseOnHover={false}
      theme="light"
    />
  );
};

export default Toast;

• /pages/Test.tsx
  • 실제 화면에서는 위에서 만들어둔 Toast 컴포넌트와 notify 함수(알람 종류 선택)를 import 받아서 버튼을 클릭했을 때 notify() 함수가 실행되도록 구현해주었다.

import Button from "../elements/Button";
import Toast, { notify } from "../elements/Toast";

const Test = () => {
  return (
    <div>
      <Button
        onClick={() => {
          notify({
            type: "default",
            text: "토스트입니다.",
          });
          notify({
            type: "success",
            text: "토스트입니다.",
          });
          notify({
            type: "warning",
            text: "토스트입니다.",
          });
          notify({
            type: "error",
            text: "토스트입니다.",
          });
        }}
      >
        토스트
      </Button>
      <Toast />
    </div>
  );
};

export default Test;

 

Toast 컴포넌트 세부 설정

• jsx에 있는 ToastContainer 내부의 속성은 Toast 기본 설정이고, notify() 호출했을 때 따로 속성을 설정하지 않으면 해당 속성으로 Toast가 출력됩니다.

/element/Toast.tsx

• 위 과정에서 설정한 기본값이 아니라, 알림 종류별로 다른 속성 설정이 필요한 경우 아래와 같이 toast()의 두 번째 인자에 { ... }으로 삽입하여 개별적으로 설정할 수도 있습니다.

/element/Toast.tsx > notify()

• 세부 설정 옵션은 아래 블로그에 자세하게 기재되어 있습니다! (+ :root에서 스타일 바꾸는 부분도 잘 정리되어 있습니다.)

[React.js] react-toastify 란? / 사용법