[React] react-hot-toast로 toast 띄우기

Toast

토스트 메시지란 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소이다. 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 사라진다.

→ 이를 사용하게 된 계기는 alert창을 쓰다가 단조로워서 바꿀까하다가 우연히 보게 참고 사이트 글을 보게 되어 사용하게 되면서 글을 쓰게 되었다.

react-hot-toast 사용하기

1) 패키지 설치하기

npm i react-hot-toast

2) 앱에 toaster 넣기

import toast, { Toaster } from 'react-hot-toast';

해당 패키지를 설치했으니, 이를 가져온다.

const App = () => {
  return (
    <div>
      <Toaster />
			<button onClick={notify}>Make me a toast</button>
    </div>
  );
};

toast를 쓰기 위해서 Toaster를 앱에 맨 위에 넣어준다.

3) toast할 메시지 넣기

toast.success('로그아웃이 되었습니다. ');

실행 결과

toast 실행모습

👇🏻참고사이트

Documentation - react-hot-toast