[React] React Toast를 활용한 알림 메세지 구현

React Toast는 사용자 알림을 간편하게 구현할 수 있는 라이브러리이다. React Toastify를 통해 손쉽게 사용자에게 피드백을 전달할 수 있다. 알림은 사용자의 경험을 강화하는 중요한 요소이기 때문에 적절한 위치와 타이밍에 사용해야 한다.

 

◆ 설치 및 적용

 

react-toastify 패키지를 추가한다.

yarn add 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.success("성공적으로 저장되었습니다!", {
      position: toast.POSITION.TOP_CENTER,
    });
  };

  return (
    <div className="App">
      <button onClick={notify}>저장 완료 알림 띄우기</button>
      <ToastContainer />
    </div>
  );
}

export default App;

 

• ToastContainer는 알림 메시지가 표시될 영역을 나타낸다.
• toast는 다양한 타입의 메시지를 표시하는 함수로, toast.success(), toast.error(), toast.info() 등을 사용한다.

◆ Toast 옵션 설정

 

토스트 메시지는 다양한 옵션을 통해 커스터마이징할 수 있다.

• position: 알림의 위치를 지정한다. (TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, 등)
• autoClose: 알림이 자동으로 닫히는 시간으로, 밀리초 단위이며 기본값은 5000이다.
• hideProgressBar: 프로그레스 바를 숨길 것인지를 결정한다.
• closeOnClick: 클릭 시 알림이 닫히도록 설정한다.

// 옵션 설정 예시
toast.info("정보가 업데이트되었습니다.", {
  position: "bottom-right",
  autoClose: 3000,
  hideProgressBar: true,
  closeOnClick: true,
});

 

 

◆ Toast 활용 범위

 

React Toastify는 사용자에게 중요한 정보나 행동 결과를 알릴 때 유용하게 쓸 수 있다. 이렇게 알림을 사용함으로써 사용자와의 상호작용을 보다 직관적으로 만들 수 있다.

• 사용자가 데이터를 성공적으로 저장했을 때 (toast.success)
• 네트워크 오류로 인해 요청이 실패했을 때 (toast.error)
• 잘못된 입력이 있을 때 (toast.warn)