간단 토스트 팝업

피그마 플러그인 개발 중에 원래 figma.notify를 이용하여 간단한 알림창을 띄우려고 하였으나, 플러그인 내부에서 띄우는 게 좋겠다는 생각으로 시작한 뚝딱 토스트.

토스트 컴포넌트 생성

토스트 컴포넌트를 만들어준다.

prop 항목

• message : toast로 제공할 메시지 내용
• isvisible : state를 prop으로 받아 조건부 렌더링 해줌
• onClose : isvisible의 상태를 false로 바꿔주는 함수 호출

import React, { useEffect } from 'react';
import styled from 'styled-components';

const ToastWrapper = styled.div`
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 1000;
  font-size: 14px;
  width: max-content;
  height: 35px;
  background-color: #111;
  color: #fff;
`;

function Toast({ message, isVisible, onClose }) {
  useEffect(() => {
  
 // isVisible prop이 true이면 3초 후에 onClose 함수 호출하는 타이머 설정
    if (isVisible) {
      const timer = setTimeout(() => {
        onClose();
      }, 3000);
      
// 타이머 제거
      return () => clearTimeout(timer);
    }
    
// isVisible가 false일 때의 반환값:
    return () => {};
  }, [isVisible, onClose]);
  
// prop으로 받아오는 state로 조건부 렌더링
  return isVisible && <ToastWrapper>{message}</ToastWrapper>;
}

export default Toast;

clean-up 함수

cleanup 함수는 useEffect가 다시 실행될 때나 컴포넌트가 언마운트될 때 호출된다.

clearTimeout(timer)를 호출하는 cleanup 함수를 이용하여
컴포넌트가 언마운트되거나 isVisible 또는 onClose prop이 변경되기 전에 타이머가 완료되지 않은 경우(동시에 작동하는 상황 방지)에도 타이머를 안전하게 제거할 수 있다.

토스트 state 설정

토스트가 띄워질 페이지에 메시지, state 그리고 state 변경하는 함수 생성

const [toastVisible, setToastVisible] = useState(false);

// state변경하여 토스트 띄워줄 함수
const showUnsupportedToast = () => {
    setToastVisible(true);
  };

... 생략
return
        <Toast
          message="지금은 아직 사용할 수 없는 기능이에요."
          isVisible={toastVisible}
          onClose={() => setToastVisible(false)}
        />

토스트를 제공할 상황에 함수 호출

나의 경우에는 메뉴 중 미지원을 알려주는 내용이므로 메뉴 클릭 시에 해당 항목이 미지원 항목이면 해당 함수를 호출해 주었다.

  {MENU_LIST.map(({ id, list, state }) => (
          <Text
            key={id}
            active={state}
            onClick={() => {
              if (!state) {
                showUnsupportedToast();
              }
            }}
          >
            {list}
          </Text>
        ))}