토스트(react-toastify) 사용하기

Toast란?

 

Toast는 화면의 특정 위치에 잠깐 나타났다가 사라지는 간단한 알림 메시지를 제공하고

사용자에게 빠르게 정보를 전달하거나 작업의 피드백을 제공하기 위해 사용됨

 

특징

 

일정 시간 동안만 화면에 표시된 후 자동으로 사라짐

에러, 성공, 경고 등의 간단한 상태 메시지를 전달하는 데 적합함

팝업과 달리 사용자의 작업을 방해하지 않으며 인터랙션이 필수가 아님

 

커스텀

 

상단, 하단, 왼쪽, 오른쪽 등 화면의 어느 위치에 표시할지 설정할 수 있음

토스트 메세지가 사라지는 시간을 설정할 수 있음

필요에 따라 사용자가 수동으로 닫을 수 있도록 닫기 버튼을 추가할 수 있음

 

사용 예시

 

성공 메시지: 데이터 저장, 사용자 로그인 등 성공적으로 작업이 완료되었을 때.

에러 메시지: 네트워크 오류, 잘못된 입력 등 실패한 작업에 대한 경고.

정보 메시지: 사용 안내, 잠금 상태 등 기타 정보 제공.

 

사용 방법

 

 react-toastify, react-hot-toast와 같은 라이브러리를 사용하여 쉽게 구현할 수 있음

 

import Router from "./shared/Router";
import { ToastContainer } from "react-toastify";
const App = () => {
  return (
    <>
      <ToastContainer position="top-right" autoClose={1000} closeOnClick draggable transition:Bounce />
      <Router />;
    </>
  );
};

export default App;

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

//...
    if (userBookmarkExists) {
   		 toast.error("북마크가 삭제되었습니다!");
    } else {
   		 toast.success("북마크가 추가되었습니다!");
    }
        
 ...//

 

 

ToastContainer는 중복으로 사용하면 오류가 나기 때문에 토스트 메세지를

여러 컴포넌트에서 사용한다면 상위 컴포넌트가 되는 곳에서 1번만 사용해주는게 좋은 것 같음 

 

메세지를 알림창을 띄우고 싶은 함수나 컴포넌트에 사용 예시 코드처럼 기입해주면 잘 나온다

 

 

 

마치며

 

지금까진 alert를 주로 사용해서 사용자에게 알림 창을 띄웠는데

toast를 사용하니 사용자 경험 향상에도 큰 도움이 될 것 같다

사용 방법도 너무 쉬워서 토스트 메세지가 어울리는 프로젝트에는

안쓰는게 손해가 아닐까 생각이 든다..!