아직도 alert() 쓰니? 이제 예쁘고 사용성도 좋은 toast 띄우자 (react-hot-toast)
2023. 1. 26. 21:58ㆍ각종 코딩 관련
웹앱을 개발하다보면 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()보다 여러모로 훠어어어어어어어얼씬 낫다.
'각종 코딩 관련' 카테고리의 다른 글
AWS RDS MariaDB에서 Latin으로 설정된 Character/Collation 수정 (0) | 2023.03.30 |
---|---|
[React Native] Swiper 안에서 Array.map()으로 만든 컴포넌트가 한 View(한 페이지) 안에 뭉치는 버그 (0) | 2022.09.18 |
[express] http 요청을 https로 redirect해주기 (0) | 2022.05.10 |
[Express] Error: listen EADDRINUSE: address already in use :::5000 오류 해결 (0) | 2022.03.28 |
Emotion에서 스타일에 property 전달하는 법 (조건부 스타일링) (0) | 2022.01.13 |