React 로 시계 만들기 - useState, useEffect

import {useState, useEffect } from 'react';

function Home() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return (() => clearInterval(id))
  }, []);
  
  return (
    <div>
      <h1>Clock</h1>
      <span>{time.toLocaleTimeString()}</span>
    </div>
  )
}

export default Home;

 

useState 로 time 변수를 활용

 

useEffect 로

첫 render 시, setInterval -> 1초마다 setTime(new Date())

종료 시, clearInterval

 

setInterval

첫번째 argument = 일정시간마다 수행되는 함수

두번째 argument = 얼마 간격으로 수행할 것인지