npm i moment
import moment from "moment";
// 오늘 요일의 값을 useState로 저장
const[seconds, setSeconds] = useState(moment().format('HH:mm:ss'));
// 날짜를 얻어오기 위한 dayOfWeek
const dayOfWeek = new Date(moment().format('YYYY-MM-DD')).getDay();
npm i react-use
import { useInterval } from 'react-use';
useInterval(()=>{
setSeconds(moment().format('HH:mm:ss'));
}, 1000);
// useInterval.d.ts
declare const useInterval: (callback: Function, delay?: number | null | undefined) => void;
export default useInterval;
// useInterval.js
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var useInterval = function (callback, delay) {
var savedCallback = react_1.useRef(function () { });
react_1.useEffect(function () {
savedCallback.current = callback;
});
react_1.useEffect(function () {
if (delay !== null) {
var interval_1 = setInterval(function () { return savedCallback.current(); }, delay || 0);
return function () { return clearInterval(interval_1); };
}
return undefined;
}, [delay]);
};
exports.default = useInterval;
interface IWeekInfo {
id : number
date : string,
state : boolean
}
// week state
const [week, setWeek] = useState<IWeekInfo[]>([
{id: 0, date: '월', state: false},
{id: 1, date: '화', state: false},
{id: 2, date: '수', state: false},
{id: 3, date: '목', state: false},
{id: 4, date: '금', state: false},
{id: 5, date: '토', state: false},
{id: 6, date: '일', state: false}
]);
// check.tsx
useEffect(() => {
(seconds === '00:00:00' || dayOfWeek === 1) && setWeek(
(week) => {
let newWeek = [
{id: 0, date: '월', state: false},
{id: 1, date: '화', state: false},
{id: 2, date: '수', state: false},
{id: 3, date: '목', state: false},
{id: 4, date: '금', state: false},
{id: 5, date: '토', state: false},
{id: 6, date: '일', state: false}
]
return newWeek;
}
);
},[seconds]);
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render