Toast 팝업 만들기

Toast 팝업은 무언가 액션을 시작했을 때, 종료되었을 때, 상태가 바뀌었을 때 등등의 경우 알려주는 팝업입니다. 

따로 닫기 버튼을 두지 않고 일정 시간이 지나면 자동으로 사라집니다. 

 

JavasScript환경에서 setTimeout을 통해 간단하게 구현이 가능합니다. 

토스트 팝업

// App.js
import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <div className="btnWrap">
        <button onClick={handleToast}>CLICK</button>
      </div>
    </div>
  );
}

// Toast.js
export default function Toast({ msg = "메세지 없음" }) {
  return <div className="toast">{msg}</div>;
}

// styles.css
.App {
  font-family: sans-serif;
  text-align: center;
}

.btnWrap {
  padding-top: 50px;
}

button {
  background: lightseagreen;
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  border: 0 none;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background: darkcyan;
}

.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 11px;
  min-width: 200px;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 4px;
  border: 1px solid #000;
}

Toast에 msg를 props값으로 받아 사용하기로 합니다. 

만약 넘겨받는 msg값이 없다면 "메세지 없음"을 기본으로 출력하도록 합니다. 

 

Toast를 구현하는 방법은 다음과 같습니다. 

1. Toast state를 false를 기본값으로 둔다. 

2. 버튼 클릭시 Toast state를 true로 변경한다. 

3. useEffect에서 Toast 값을 리스닝하고, Toast가 true인 경우 1000ms후 다시 false로 변경한다. 

 

// App.js
export default function App() {
  const [ToastStatus, setToastStatus] = useState(false);
  const handleToast = () => {
    setToastStatus(true);
  };
  useEffect(() => {
    if (ToastStatus) {
      setTimeout(() => setToastStatus(false), 1000);
    }
  }, [ToastStatus]);
  return (
    <div className="App">
      <div className="btnWrap">
        <button onClick={handleToast}>CLICK</button>
      </div>
      {ToastStatus && <Toast msg="I am Toast 🍞" />}
    </div>
  );
}

아주 간단합니다. 

여러개를 써야 하는 경우에는 상태 메시지를 객체로 따로 관리하면서 state로 같이 관리해 줄 수도 있습니다. 

import { useState, useEffect } from "react";
import "./styles.css";
import Toast from "./Toast";

// 메세지목록
const msgList = {
  complete: "확인되었습니다.",
  amend: "수정되었습니다.",
  cancel: "취소되었습니다."
};

export default function App() {
  const [ToastStatus, setToastStatus] = useState(false);
  const [ToastMsg, setToastMsg] = useState(""); // 토스트에 표시할 메세지

  const handleToast = (type) => {
    setToastStatus(true);
    setToastMsg(msgList[type]);
  };

  useEffect(() => {
    if (ToastStatus) {
      setTimeout(() => {
        setToastStatus(false);
        setToastMsg(""); 
      }, 1000);
    }
  }, [ToastStatus]);

  return (
    <div className="App">
      <div className="btnWrap">
        <button onClick={() => handleToast("complete")}>확인</button>
        <button onClick={() => handleToast("amend")}>수정</button>
        <button onClick={() => handleToast("cancel")}>취소</button>
      </div>
      {ToastStatus && (
        <>
          <Toast msg={ToastMsg} />
        </>
      )}
    </div>
  );
}

이렇게 처리해 주면 하나의 토스트팝업으로 다양하게 사용할 수 있습니다. 

이렇게 하면 끝난것 같지만 한 가지 문제점이 있습니다. 

버튼을 1000ms 이내에 클릭할 때 문구만 실시간으로 바뀌게 됩니다. 

 

문제점

이를 방지하기 위해서는 토스트 팝업의 액션이 끝나면 동작이 가능하게 해 주면 됩니다. 

export default function App() {
 {...}
  const handleToast = (type) => {
    if (!ToastStatus) { //  ToastStatus가 false일때만!
      setToastStatus(true);
      setToastMsg(msgList[type]);
    }
  };
  {...}
  return (
    ...
  );
}

이렇게 간단하게 조건만 추가해주면 됩니다. 

그럼 ToastStatus가 true에서 false로 바뀌기 전까지는 새로운 상태가 업데이트되지 않습니다.