REACT_moment로 현재 시간 띄우기(실시간)

JSkim·2022년 5월 19일
1

react에서 현재 시간 실시간으로 띄우기

설치할 라이브러리

npm install moment react-moment use-interval

이렇게 설치 후

import Moment from 'react-moment';

import {useInterval} from "use-interval";

임포트 해주기.

useInterval 사용법

useInterval(()=>{delay마다 실행시킬 것들},delay} 이렇게 사용함

const [nowTime,setNowTime]=useState(Date.now())

    useInterval(()=>{
        setNowTime(Date.now())
    },1000)

1초마다 현재 시간 가져옴.

이제 react-moment로 시간 포맷 맞춰주기

포멧은 '시간:분:초' 이런형식으로 나오게 해보자
className 안에다css로 모양도 예쁘게 꾸며보자.

<Moment format={"HH:mm:ss"} className={'moment-box'}>{nowTime}</Moment>

-끝-

profile
제주도 프론트앤드 개발자의 개발 일기

1개의 댓글

comment-user-thumbnail
2023년 3월 29일

감사합니다!

답글 달기