[React] 알림창 띄우고 사라지게 하기

문제

 

 

어떤 것을 장바구니에 담았을 때, 담아졌는지 않았는지 알기 어려운 문제가 있었음. 이를 해결하기 위해 alert를 이용해 알림창을 띄웠는데 일일이 확인을 누르기 귀찮은 문제 발생. 이에 따라 일정 시간이 지나면 자동으로 사라지게끔 하는 기능이 필요

 

해결

 

setTimeout()과 clearTimeout()을 이용해 알림 메시지를 띄운 후, 사라지게 했다. 아래와 같이 컴포넌트를 하나 만들어준다. (컴포넌트를 만들지 않고 사용하고 싶은 곳에서 하나 만들어 사용해도 될 것 같다. 본인은 여러 곳에서 사용할 수 있을 것 같아서 컴포넌트로 만들었다.)

 

import { useEffect } from "react";

export default function Message ({setMessage, text}) {
	
    useEffect(() => {
    	const timer = setTimeout(() => {
        	setMessage(false);
        }, 2000);
		return () => {
        	clearTimeout(timer)
            };
    }, [setTimeout]);
      return (
    <div> 
      <p>{text}</p>
    </div>
  );
}

만든 후에 사용하고 싶은 곳에 아래와 같이 적용하면 된다.

const [message, setMessage] = useState(false);

// 중략

{message && <Message setMessage={setMessage} text="🛒 장바구니에 추가되었습니다."/>}

주의

 

setTimeout을 사용했을 때 clearTimeout으로 타이머를 정리해줘야 한다. 그렇지 않으면 메모리 누수가 일어나기 때문이다.

 

참고한 곳

https://velog.io/@runprogrmm/React-%ED%86%A0%EC%8A%A4%ED%8A%B8-%EB%A9%94%EC%8B%9C%EC%A7%80-%EB%9D%84%EC%9A%B0%EA%B8%B0