setTimeout쓸 때 주의할 점

let history = useHistory();
let [isPassedTime, setIsPassedTime] = useState(false);
let [inputData, setInputData] = useState("");

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

useEffect(() => {
        return () => { console.log("component is disappeared") }
        //컴포넌트가 사라지기 전에 수행할 작업
    })

setTimeout에 시간을 설정하고 나서 시간이 소요되기 전에 화면이동 (컴포넌트가 재 렌더링되는 행동)을 하게되면 버그가 발생할 수 있다.

useEffect 안에 return () => { } 패턴을 사용하면 해당 컴포넌트가 사라질 때 수행하는 로직을 작성할 수 있다.

timer 변수를 선언해서 setTimeout()이 생성한 타이머를 식별하기 위한 값을 할당받고,
이를 return () => {clearTimeout(timer)}처럼 사용해주면 위에서 말한 버그를 방지할 수 있다.

MDN setTimeout과 clearTimeout