TIL 92. 2024-05-13

Task TODOLIST

• useCountDown.ts

✨ 개발 내용

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;
};

✨TroubleShotting

트러블 슈팅


새로 변경한 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를 사용하여 렌더링의 순서를 변경하여 해결

  // 모달창 종료 시점
  useEffect(() => {
    if (count === 0) {
      setIsOpen(false);
      console.log("ModalTime 종료", count);
    }
  }, [count]);