import { useState, useEffect } from "react";
export const useCountDown = (initialTime: number) => {
const [time, setTime] = useState(initialTime * 10);
useEffect(() => {
const timer = setInterval(() => {
setTime((prevTime) => prevTime - 1);
}, 100);
return () => {
console.log("useCountDown UnMount");
clearInterval(timer);
};
}, [initialTime]);
return time;
};
트러블 슈팅
새로 변경한 useCountDown Logic에 대한 내용
```tsx
import { useState, useEffect } from "react";
export const useCountDown = (initialTime: number) => {
const [time, setTime] = useState(initialTime * 10);
// * 10을 한 이유는 time 기능을 사용하는 곳: progress Bar
// 기존) 1초단위의 Progress Bar에서는 툭툭 끊기는 모습을 볼 수 있었다.
// 현재) 시간을 더 쪼갠 후 0.1초씩 흘러가게 설정
useEffect(() => {
const timer = setInterval(() => {
setTime((prevCount) => {
//타이머 0초일 경우 clear-up(타이머 정리)
if (prevCount <= 0) {
console.log("useCountDown 종료", prevCount);
clearInterval(timer);
}
return prevCount - 1;
});
}, 100);
return () => {
//UnMount시 실행(안전용)
clearInterval(timer);
};
}, [initialTime]);
return time;
};
//사용하는 모달 컴포넌트
const count = useCountDown(5);
// 모달창 종료 시점
if (count === 0) {
setIsCreate(false);
console.log("ModalTime 종료", count);
}
문제: useCountDown.tsx의 state의 값이 처리되는 중(렌더링 되는중)
모달 컴포넌트를 강제로 unMount시켜 useCountDown 컴포넌트 또한 강제 종료 시키는 문제가 발생하였다.
Warning: Cannot update a component (
Mainpage
) while rendering a different component 발생
// 모달창 종료 시점
useEffect(() => {
if (count === 0) {
setIsOpen(false);
console.log("ModalTime 종료", count);
}
}, [count]);