react-toastify 사용 시 토스트가 끝날 때에 맞춰 코드를 실행하는 방법
토스트 알림
웹 페이지에서 전통적인 메세지 표시 방법은 역시 alert, confirm, prompt이다. 2000년대 초반, 중반, 심지어 2010년대에 들어서도 가끔씩 prompt를 사용해 입력 값을 받아오는 사이트를 볼 수 있었다.1
허나 alert, confirm은 2000년대 말 들어서 서서히 사라지다가, 어느 순간 메이저 사이트는 물론 어지간한 일반 사이트들에서도 사라졌다. 물론 아직도 일부 사이트, 특히 보안 프로그램을 가장한 스파이웨어를 심어대는 국내 사이트들에서는 보이기도 하지만 아무튼 예전에 비해서는 압도적으로 많이 사라진 상태이다.
토스트?
처음 이 용어를 들었을 때 떠오른 것은 당연하게도 음식 토스트였다. 토스터기를 아주 어렸을 때 빼고는 사용한 적이 없던 나는 곧바로 용어의 어원을 유추하기가 힘들었다.
위 문단에서 알 수 있듯, 토스트 메세지의 토스트는 말 그대로 토스트를 의미한다. 정확히는 토스터기에서 튀어 올라오는 토스트이다.
나는 이런 형식의 알림을 웹이 아닌 안드로이드 스마트폰에서 처음 접했다. 화면 아래에서 페이드 인/슬라이드 되며 튀어올라오는 메세지. 이게 바로 토스트 메세지였던 것이다.
물론 꼭 아래에서 튀어올라오라는 법은 없다. 지금 와서는 스크린 가장자리 또는 외부에서 나타나는 알림 메세지를 전부 토스트 메세지라고 퉁치는 것 같다.
react-toastify
이러한 토스트 메세지를 리액트에서 손쉽게 구현할 수 있도록 해주는 라이브러리가 바로 react-toastify이다. <ToastContainer {...} />를 토스트를 출력해야 하는 컴포넌트2에 선언하고 원할 때마다 toast(), toast.info(), toast.promise, toast.error, ... 메서드를 호출하여 컨테이너의 설정에 따라 토스트 메세지를 화면에 출력할 수 있다.
 |
|---|
| react-toastify |
토스트가 끝날 때 로직 실행
개발을 하다 보면 이런 토스트 메세지를 단순히 출력하는 데에서 그치지 않고 토스트 알림이 끝났을 때 자동으로 다른 로직을 실행해야 할 때가 있다. 예를 들어, 위 이미지에서 설정을 저장한 뒤 자동으로 설정 페이지로 이동해야 하는 경우 등.
공식 문서의 API를 보면 이럴 때 onClose 옵션을 사용할 수 있다.
다행히도 이 라이브러리는 기본이 되는 toast() 뿐 아니라 toast.info, toast.success, toast.error, … 등 여러 바리에이션 메서드에서도 모두 옵션을 전달할 수 있다. 따라서 현재 작성되어 있는 코드에(혹은 작성할 코드에) 다음과 같이 옵션을 지정하면 해당 메세지가 끝날 때 원하는 로직을 실행시킬 수 있다.
toast.info("메세지", {
onClose: () => {
// 토스트 메세지가 닫힐 때 실행할 로직
}
});
물론 대리자로 async 메서드도 전달할 수 있다.
toast.info("메세지", {
onClose: async() => {
await fetch(/* ... */);
}
공식 문서에 다 있다!
어지간한 라이브러리는 공식 API 문서에 웬만한 내용이 다 있다. 물론 어떤 경우에는 문서를 뒤지는 것보다 구글링이 빠를 때도 있지만, 시간이 촉박한 상황이 아니라면 특정 라이브러리를 사용하기 전 해당 라이브러리의 API 문서를 대충이라도 훑어 보면 도움이 될 것이다.
왜 이런 말을 하냐면, 나는 이런 옵션이 있는 줄도 모르고 해당 기능을 바닥부터 구현하려 했기 때문이다.
잊지 말자. 공식 문서.
댓글
댓글 쓰기