시계 컴포넌트 (사용자 Hook) 에서 10분 단위로 표출하기 (day.js, floor)

현재 상황은 DB에는 10분단위 데이터가 쌓일 예정

하지만 시계는 실시간 정보를 화면에 보여주고 있다.

이러한 이유로 해당 정보에서 0~9분 데이터는 지우고

만약 현재 시간이 16분이라면 10분, 35분이라면 30분 등으로 표시될 수 있게 스크립트를 구현하였다.

 

import { useEffect, useState } from 'react';
import dayjs from 'dayjs';

const useFloorTime = () => {
  const [clock, setClock] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      let now = dayjs();
      let minutes = now.minute();
      minutes = ('0' + Math.floor(minutes / 10) * 10).slice(-2);
      setClock(now.minute(minutes).format('MM월 DD일 HH시 mm분'));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return [clock];
};

export default useFloorTime;

 

setClock에 setInterval timeout을 설정하여, 일정시간마다 해당 함수를 실행하여 계산할 수 있도록 설정하였다.