ToDoList에 현재시간 만들기

예전에 js로 만든 코드를 살짝 바꿔서 리액트로 만들어보고자 한다.

살짝만 바꾸는건데도 에러가 많이 떠서 

아..아직 리액트가 익숙하지가 않구나 했다... 

처음에 복붙했는데 이러면 리액트를 사용하는 의미가 있나 싶어 state를 사용하기로!

 

#  순서

 

우선은 components 폴더에 clock파일을 하나 만들어준다.

state에  timer와 setTimer를 넣어주고, 초기값은 "00:00:00" 상태로 만들어줄것이다. 

현재시간을 의미하는 currentTime 함수를 만들고, 이 함수에 Date 내장객체를 이용해서

시,분,초를 불러온다. 그리고 setTimer 값에 변화된 hours, minutes, seconds를 넣어준다.

startTimer라는 함수를 통해서 1초마다 시간 데이터를 불러오는 setInterval 함수를 사용해서 

current함수를 1초마다 업데이트 시킨다. 그리고 startTimer를 작동시켜준다.

// Clock.tsx

import { useState } from "react";
import styled from "styled-components";

function Clock() {

    const [timer, setTimer] = useState("00:00:00");
    const currentTime = () => {
        const date = new Date();
        const hours =String(date.getHours()).padStart(2,"0");
        const minutes = String(date.getMinutes()).padStart(2,"0");
        const seconds = String(date.getSeconds()).padStart(2,"0");
        setTimer(`${hours} : ${minutes} : ${seconds}`);
    };

    const startTimer = () => {
        setInterval(currentTime,1000);
    }
    startTimer()

 return (
    <TimeControl>
        <h1>{timer}</h1>
    </TimeControl>

 );
}
export default Clock;

return문에는 초기값인 timer 변수를 넣었다. 

추가로 오늘 날짜에 대한 코드도 추가했다..!