React-Toastify를 활용한 알림(토스트) 살펴보기

React-Toastify란 무엇인가요?

React-Toastify는 React 애플리케이션에서 간단하게 알림(토스트)을 표시할 수 있도록 도와주는 라이브러리입니다. 간편하게 설치하고 사용할 수 있습니다. 기본적인 알림뿐만 아니라, 다양한 스타일과 옵션을 제공합니다.

 

 

설치

npm install react-toastify

설치가 완료되면 ToastContainer 컴포넌트를 루트 컴포넌트에 추가하고, 필요한 곳에서 toast 함수를 호출하여 알림을 띄울 수 있습니다.

 

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

function App() {
  const notify = () => toast("알림 등장!");

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

export default App;

버튼 클릭 시 "알림 등장!"이 뜨는 것을 확인할 수 있습니다.

 

주요 기능 및 옵션

1. 버튼 알림 위치 설정

Toast의 위치는 position 속성을 통해 지정할 수 있습니다. top-right, top-center, bottom-left 등 다양한 위치를 설정할 수 있습니다.

toast("Message", { position: "bottom-right" });

 

2. 자동 닫힘 시간 설정

알림이 화면에 유지되는 시간을 설정하려면 autoClose 옵션을 사용합니다. 기본값은 3000ms(3초)입니다.

toast("Message", { autoClose: 3000 });

 

3. 타입 지정

알림의 타입을 설정하여 다른 스타일을 적용할 수 있습니다. success, error, info, warning 등의 타입을 지정하여 적절한 상황에 맞는 알림을 표시할 수 있습니다.

toast.success("This is a success message!");
toast.error("Something went wrong!");

 

자주 발생하는 문제와 해결 방법

1. 스타일이 적용되지 않는 문제

ToastContainer를 포함하지 않으면 스타일이 제대로 적용되지 않습니다. 꼭 ToastContainer 컴포넌트를 최상위 컴포넌트에 포함시켜야 합니다.

<ToastContainer />

 

2. 알림이 여러 번 중복되는 문제

버튼 클릭 이벤트에서 알림을 표시할 때, 클릭할 때마다 중복된 알림이 뜨는 경우가 발생할 수 있습니다. 이럴 때는 알림이 이미 떠있는지를 확인한 후 띄우도록 하거나, toast.dismiss()를 통해 이전 알림을 종료하는 방법을 사용할 수 있습니다.

if (!toast.isActive("unique_id")) {
  toast("Unique message", { toastId: "unique_id" });
}

 

3. 서버사이드 렌더링(SSR)과의 호환성 문제

Next.js와 같은 서버사이드 렌더링을 사용하는 경우에는 브라우저 환경에서만 실행되도록 클라이언트 측에서만 알림을 띄워야 합니다. useEffect를 사용해 브라우저에서만 toast를 호출하도록 설정할 수 있습니다.

import { useEffect } from 'react';
useEffect(() => {
  toast("This runs only in the browser!");
}, []);