23/11/30

Laejun Kim·2023년 11월 30일

TIL

목록 보기

46/89

react-toastify

공식문서)https://fkhadra.github.io/react-toastify/installation

사용법

1. `yarn add react-toastify`

2. 프로젝트에 추가하기.

import Router from "router/Router";
import GlobalStyle from "GlobalStyle";
🎇import { ToastContainer } from "react-toastify";
🎇import "react-toastify/dist/ReactToastify.css";

function App() {
  return (
    <>
      <GlobalStyle />
      <Router />
    🎇<ToastContainer />
    </>
  );
}

export default App;

ToastContainer와 css를 추가해야 한다. 이때 ToastContainer는 프로젝트 전체에서 단 한번만 추가해 주는것이다.
toastify를 사용할 모든 컴포넌트에 추가해 주는 것이 아님에 주의해야한다!

공식문서에는 toast 도 임포트 하라고 안내되어 있는데 toast를 App.jsx에서 사용할 것이 아닌 이상 컨테이너만 임포트 하는 것이 맞다.

3. 사용하기

사용할 컴포넌트에서
import { toast } from "react-toastify";로 임포트를 한뒤 사용한다.
이때 Toast라는 이름이 아주 많으니 잘못 임포트 하지 않도록 주의해야 한다. Toast가 아니고 toast다.

사용할 위치가 정해졌으면 디자인을 선택해야 하는데 이것도 공식문서에서 아주 쉽게 할 수 있다. 공식문서에 들어가보면 아래와 같이 손쉽게 원하는 디자인을 고를 수 있게 되어있다.

Position/Type/Theme을 선택하고 하단의 Show Toast를 눌러 어떻게 보일지를 확인한다. 이후 마음에 드는 디자인이 정해졌으면 우측 상단의 toast 코드를 복사해 사용하면 된다.(표시될 text는 직접 바꿔야한다)

4. 사용 예시

 const loginBtnHndlr = async () => {
    try {
      const { data } = await axios.post(
        `${process.env.REACT_APP_JWT_BASE_URL}/login`,
        {
          id: id,
          password: pw,
        }
      );
      toast.success("로그인 성공!", {
        position: "top-center",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "light",
      });
      dispatch(setUser(data));
      navigate("/");
    } catch (error) {
      console.error("에러발생 : ", error.response.data.message);
      toast.error(`${error.response.data.message}`, {
        position: "top-center",
        autoClose: 2000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "light",
      });
    }
  };