[TIL] React 토스트 메시지

특정 조건에서 잠깐 나타났다가 사라지는 토스트 메시지를 React로 구현해보자

 

[ToastMessage.js]

import './ToastMessage.css';

export const ToastMessage = (props) => {
  return (
    <div className="toast_container">
      <div className="toast_text">{props.text}</div>
    </div>
  );
};

[ToastMessage.css]

.toast_container {
  position: fixed;
  z-index: 99;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24rem;
  height: 2.625rem;
  border-radius: 10px;
  box-shadow: 0 0 15px 0 var(--black-40);
  background-color: #323232;
}

.toast_text {
  font-weight: bold;
  letter-spacing: 0.29px;
  text-align: center;
  margin-top: 0.6rem;
}

레이아웃을 만들어준다

 

[AudioMain.js]

import { ToastMessage } from '../Modal/ToastMessage';
 
const [downloadToast, setDownloadToast] = useState(false);
 
{downloadToast && <ToastMessage text={'다운로드가 시작되었어요'} />}

원하는 곳에 레이아웃을 조건부렌더링으로 넣어준다

  function activeToast() {
    setDownloadToast(true);
    let timer = setTimeout(() => {
      setDownloadToast(false);
    }, 2000);
    return () => {
      clearTimeout(timer);
    };
  }

state를 활성화 했다가 setTimeout으로 일정 시간이 지나면 비활성화 해주는 함수를 작성해준다 (1000 = 1초)

<a
  onClick={() => activeToast()}
  className="download_link"

원하는 곳에 함수를 넣어준다

 

메시지가 잠깐 나타났다가 사라진다

 

---

  useEffect(() => {
    let timer = setTimeout(() => {
      setState(false);
    }, 2000);
    return () => {
      clearTimeout(timer);
    };
  }, []);

* state 초기값을 true로 해주고 useEffect와 조합하면 새로고침할 때마다 토스트 메시지를 띄울 수도 있다