아직도 alert() 쓰니? 이제 예쁘고 사용성도 좋은 toast 띄우자 (react-hot-toast)

 

https://react-hot-toast.com/

react-hot-toast - The Best React Notifications in Town - react-hot-toast

이렇게 생긴 알림창을 토스트라고 말한다.

웹앱을 개발하다보면 alert()를 통해서 에러메시지 등을 표현하는 경우가 많은데, 사실 alert는 기술적 측면에서나 UX측면에서나 모두 좋지 않다. alert 알림창이 한번 뜨면 꺼질 때까지 코드 진행이 멈춰버리기도 하고, 브라우저의 기본 알림창 형태로 나오기 때문에 웹앱에의 몰입에 심각한 방해를 초래한다.

이럴 때 우리가 쓸 수 있는 대안이 toast라는 것이다! toast를 쓰면 코드 진행이 멈추지도 않고 웹앱에의 몰입을 깨지도 않는다. 사용법은 무척이나 간단하다.

npm install react-hot-toast

라이브러리를 설치해준 뒤

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

const notify = () => toast('Here is your toast.');

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

이렇게 toast()함수로 불러주면 된다. 함수를 실행했을 때 toast 컴포넌트가 존재해야 하기 때문에 <Toaster/> 컴포넌트를 아무데나 넣어주어야 한다.

이 외에 기본적인 다양한 기능들이 있는데 위 링크에 들어가서 공식 문서를 읽어보도록 하자. 공식 문서 귀찮다고 안 읽는 사람들 있는데 공식 문서를 읽어버릇해야 진짜 실력이 생긴다(고 나는 생각한다) 아무튼 모두 화이팅하자

 

내가 만든 사이트에서의 예시

복사할 텍스트가 없는데 복사하려고 하면 에러 toast를 띄워준다. 들어가서 해보면 알겠지만 alert()보다 여러모로 훠어어어어어어어얼씬 낫다.

https://wannamean.com 

원어민 WannaMean