『2023.03.06』 - 하이더스트 시간 설정 및 여러가지

2023.03.03 – (⊹⠀? Seamless Pattern?approximate/⊹⠀????) – 『2023.03.01』 – 하이더스트 홈페이지 구축

『 2023.03.01 』 – 하이더스트 홈페이지 구축

2023.03.03-(⊹/⊹/⊹⊹) – 『2023.02.27』 -amap 및 Graph Pro

y-seon97.

신나는 주말 끝, 오늘부터 러닝 시작!

아까 그렸던 스토리보드 좀 봐 꼬마 공익사업어젯밤에 필요하지 않다고 생각해서 일부 메뉴를 수정하고 싶었습니다.

대신 현재 시간과 날짜가 표시되면 좋겠다고 생각했기 때문입니다.

그래서 원본 공익사업코드 수정…

날짜 데이터를 추가하는 코드를 만들었는데 업데이트된 시간을 보려면 새로 고침해야 합니다.

측정된 시간을 확인하는 데 사용되는 코드로 교체하기로 결정…

실시간이 필요하기 때문에 useEffect를 사용하여 구성 요소를 구성합니다.

import { useState, useEffect } from "react";

const RunTime = () => {
    
    const (time, setTime) = useState(new Date());
    
        useEffect(() => {
        const timer = setInterval(() => {
            setTime(new Date());
        }, 1000);
        
        return (() => clearInterval(timer))
        }, ());
                
        return (
        <div>
            <span>{time.toLocaleTimeString()}</span>
        </div>
        );
    };

    export default RunTime;

그런데 검색하다가 쉬운 방법을 발견했는데…

즉시 실시간 시계 반응…!

설치만 하면 구성요소를 작성할 필요 없이 국가 코드로 모든 국가의 시간을 관리하고 표시할 수 있습니다…!

https://www.npmjs.com/package/react-live-clock

실시간 시계 반응

실시간 시계에 반응합니다.

최신 버전: 6.1.13, 마지막 릴리스: 3일 전. “npm i react-live-clock”을 실행하여 프로젝트에서 react-live-clock 사용을 시작하세요. npm 레지스트리에는 react-live-clock을 사용하는 18개의 다른 프로젝트가 있습니다.

www.npmjs.com