토스트 메세지 구현중에..

문제상황

토스트 메세지가 화면에 보이는 동안 다시 토스트 메세지를 발생시킬 이벤트 핸들러가 동작된다면 현재의 토스트 메세지가 아래로 이동하고 새로운 메세지가 화면에 출력되게 하고 싶었다. 아래 영상처럼 말이다.

 

 

 

하지만 실제 구현했을 때는 토스트 메세지는 변경되지만 아래로 내려가는 애니메이션이 제대로 보이지 않았다.

 

 

 

 

문제 원인

문제의 원인은 isShow 가 false 로 바뀌긴하지만 동시에 true 로 업데이트 되어버려 위와 같은 원하지 않는 UI 가 발생했다.

    if (timeout.current) {
      clearTimeout(timeout.current);
      timeout.current = null;

      setMessage((prev) => ({ ...prev, isShow: false }));

      setMessage((prev) => ({
        ...prev,
        isError,
        message: currentMessage,
        isShow: true
      }));

      timeout.current = setTimeout(() => {
        setMessage((prev) => ({ ...prev, isShow: false }));
      }, 1500);
      
      return;
    }

 

 

 

해결 방법

해결 방법으로는 setTimeout 이나, rAF 를 사용하여 조금의 딜레이를 주면된다.

나는 rAF 를 사용하여 16ms 의 시간 여유를 발생시켰다.

    if (timeout.current) {
      clearTimeout(timeout.current);
      timeout.current = null;

      setMessage((prev) => ({ ...prev, isShow: false }));

      requestAnimationFrame(() => {
        setMessage((prev) => ({
          ...prev,
          isError,
          message: currentMessage,
          isShow: true
        }));

        timeout.current = setTimeout(() => {
          setMessage((prev) => ({ ...prev, isShow: false }));
        }, 1500);
      });

      return;
    }

 

여담으로 flushSync 를 고려할 수 있었으나, 이 또한 마찬가지로 바로 isShow가 true 로 바뀌어버리기 때문에 내가 원하는 동작을 얻을 수 는 없었다.