react-toastify 사용기

목적

사실 오늘은 목적이라고 하기엔 단순한 궁금증으로 시작한 글이라, 계기라고 생각해주면 좋겠다.

평소처럼 학교 프로젝트를 사용하다가, 로그인에 실패하거나 성공했을 때 아래 사진처럼 알림이 뜨는 것을 봤다. 그런데 많은 프로젝트에서 똑같은 형식의 알림이 뜨는 것을 보고, 아, 뭔가 템플릿 같은 게 있는 건가?라고 생각하고 계속 찾아보다가 발견한 것이 오늘 소개할 react-toastify이다.

왜 토스트임?

react-toastify의 이름은 toast라는 단어에서 유래됐다. 여기서 toast는 우리가 아침에 먹는 진짜 빵 토스트가 아니라(ㄲㅂ), 화면에 잠깐 표시되는 메시지(알림)를 뜻한다. -ify는 "무엇을 ~화하다"라는 뜻의 접미사로, React 애플리케이션에서는 toast 알림을 쉽게 사용할 수 있도록 만든다는 의미를 내포한다고 한다.

바로 써보자

설치

$ npm install --save react-toastify
$ yarn add react-toastify

코드

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

function App() {
  const notify = () => toast("Wow so easy!");

  return (
    <div>
      <button onClick={notify}>Notify!</button>
      <ToastContainer />
    </div>
  );
}

export default App;

위 코드는 react-toastify를 사용하기 위한 가장 기본적인 코드인데, 실행해 보면 아래와 같은 결과물이 나온다.

커스텀

react-toastify에서는 아래와 같이 다양한 옵션을 사용하여 토스트를 커스텀할 수도 있다.

<ToastContainer
  position="top-right"     // 알림 위치 설정 (기본값: "top-right")
  autoClose={5000}         // 자동 닫힘 시간 (밀리초) (기본값: 5000)
  hideProgressBar={false}  // 진행 표시줄 숨김 여부 (기본값: false)
  newestOnTop={false}      // 새 알림을 위에 표시 여부 (기본값: false)
  closeOnClick={true}      // 클릭 시 알림 닫힘 여부 (기본값: true)
  rtl={false}              // 오른쪽에서 왼쪽으로 표시 여부 (기본값: false)
  pauseOnFocusLoss={false} // 포커스 잃었을 때 일시 정지 여부 (기본값: false)
  draggable={true}         // 알림 드래그 가능 여부 (기본값: true)
  pauseOnHover={true}      // 호버 시 타이머 일시 정지 여부 (기본값: true)
  theme="light"            // 알림 테마 (기본값: "light")
 />

마무리

오늘은 순수하게 궁금해서 어쩌다 알게 된 react-toastify에 대해 공부해봤는데, 찾아보니 생각보다 사용하는 곳도 많고 사용하는 법도 간단해서 앞으로 유용하게 잘 사용할 수 있을 것 같다.