frontendreact

React-Toastify (React 앱에 세련된 알림 기능 추가하기)

, , , , , , , , , , , , , ,

React-Toastify란?

react-toastify는 React 앱에 알림 기능을 추가할 수 있는 라이브러리입니다. 사용자에게 알림을 보여주는데 사용되며, 사용자 경험을 향상시키는데 도움이 됩니다. 또한 전역에서 일관된 디자인으로 알림을 보여 줄 수 있습니다.

React-Toastify 설치

react-toastify를 사용하려면 먼저 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

1
npm install react-toastify

React-Toastify 사용하기

설치가 완료되면, 다음과 같이 react-toastify를 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react";
import ReactDOM from "react-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import HOME from "components/home/HOME";

const App: React.FC = () => {
  return (
    <>
      <ToastContainer />
      <HOME />
    </>
  );
};

export default App;
  1. ToastContainer 컴포넌트를 react 최상위 컴포넌트에 추가합니다. css 파일도 같은 최상위 컴포넌트에 추가하여 스타일을 적용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { toast } from "react-toastify";

export enum ToastType {
  SUCCESS = "success",
  ERROR = "error",
  WARNING = "warning",
  INFO = "info",
}

interface ToastProps {
  message: string;
  type: ToastType;
}

const Toast = ({ message, type }: ToastProps) => {
  switch (type) {
    case ToastType.SUCCESS:
      return toast.success(message, { position: "top-right", autoClose: 1000 });
    case ToastType.ERROR:
      return toast.error(message, { position: "top-right", autoClose: 1000 });
    case ToastType.WARNING:
      return toast.warning(message, { position: "top-right", autoClose: 1000 });
    case ToastType.INFO:
      return toast.info(message, { position: "top-right", autoClose: 1000 });
    default:
      return null;
  }
};

export default Toast;
  1. Toast 컴포넌트를 만들어서 사용자에게 보여줄 알림을 설정합니다. message와 type을 받아서 react-toastify의 toast 메소드를 사용하여 알림을 보여줍니다. autoClose 옵션을 사용하여 알림이 자동으로 사라지는 시간을 설정할 수 있습니다. 저는 전역에서 동일한 위치, 시간으로 알림을 보여주기 위해 position과 autoClose 옵션을 설정했습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react";
import Toast, { ToastType } from "components/toast/Toast";

const notify = () => Toast({ message: "Notify!", type: ToastType.INFO });

const HOME: React.FC = () => {
  return (
    <button type="button" onClick={notify}>
      Notify!
    </button>
  );
};

export default HOME;
  1. notify 함수를 만들어서 Toast 컴포넌트를 호출합니다. Toast 컴포넌트에 message와 type을 전달하여 알림을 보여줍니다.

React-Toastify 커스터마이징

1
npm install styled-components
  1. styled-components를 설치합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from "react";
import ReactDOM from "react-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import styled from "styled-components";
import HOME from "components/home/HOME";

const CustomToastContainer = styled(ToastContainer)`
  .Toastify__toast {
    background-color: purple;
    color: yellow;
  }
`;

const App: React.FC = () => {
  return (
    <>
      <CustomToastContainer position="top-right" autoClose={500} limit={1} />
      <HOME />
    </>
  );
};

export default App;
  1. styled-components를 사용하여 ToastContainer 컴포넌트를 커스터마이징합니다. Toastify__toast 클래스를 사용하여 알림의 배경색과 글자색을 변경할 수 있습니다. 컴포넌트 속성을 사용하여 position, autoClose, limit 등을 설정할 수 있습니다. 최상단에 속성을 설정하면 전역으로 적용됩니다.

마치며

react-toastify를 사용하면 사용자에게 알림을 보여주는데 도움이 됩니다. 전역에서 일관된 디자인으로 알림을 보여줄 수 있어 사용자 경험을 향상시킬 수 있습니다. 또한 커스터마이징을 통해 디자인을 변경할 수 있어 프로젝트에 맞게 알림을 보여줄 수 있습니다. 알림을 보여주는데 사용되는 라이브러리로 react-toastify를 사용해보세요.

공유하기