[React] toast 사용법 (react-toastify)

무언가 작업을 했을 때 즉각적인 피드백을 제공하기 위해 toast를 사용했다.

 

사용자에게 경고 등을 표시할 때 alert을 쓸 수도 있지만, alert보다는 toast가 더 예뻐서 toast를 쓰려고 한다.

또한, alert은 사용자가 직접 닫아야 하지만 toast는 디자인/스타일/조작 방법 등 커스터마이징해서 사용할 수 있다.

 

🎈 패키지 설치

yarn add react-toastify

 

🎈 사용하기

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

function App() {
  const handelButtonClick = () => {
    toast.error('경고입니다.');
  }

  return (
    <>
      // 토스트를 표시할 영역
      <ToastContainer
        position="top-center" // 알람 위치 지정
        autoClose={3000} // 자동 off 시간
        hideProgressBar={false} // 진행시간바 숨김
        closeOnClick // 클릭으로 알람 닫기
        rtl={false} // 알림 좌우 반전
        pauseOnFocusLoss // 화면을 벗어나면 알람 정지
        draggable // 드래그 가능
        pauseOnHover // 마우스를 올리면 알람 정지
        theme="light"
        // limit={1} // 알람 개수 제한
      />
      <button onClick={handleButtonClick}>경고창 띄우기</button>
    </>
  );
}

 

 

🎈 미리 보기

npm 라이브러리 설명에 있는 이미지다.

react-toastify 문서를 들어가면 토스트가 어떻게 뜰지 실험해 볼 수 있다.

---

 

참고

react-toastify 적용기