5. Clock

※시계 기능을 구현, Clock. 모듈 추가

  -new Date()로 현재 시각 지정

  -setInterval 함수로 매 1초 간격으로 시간 갱신

  -clearInterval 함수로 매초 재렌더링하여 성능저하 방지

 

componenet

  -Input.jsx

  -Button.jsx

module

  -Login.jsx

  -Clock.jsx

css

  -List.css

 

module - <Clock.jsx> : setInterval(매 초마다 반복), clearInterval(반복 정지)

import React, {useEffect, useState} from 'react'

function Clock() {
  const [clock, setClock] = useState(new Date()) //현재 시각 지정
  const renewTime = () => setClock(clock => new Date()) //현재 시각 업데이트

  useEffect(() => {
    const time = setInterval(renewTime, 1000) //1초 간격으로 시간 갱신
    return () => clearInterval(time) //매초 재 렌더링하여 호출하는 성능저하 문제 막기
  })

  return (
    <div>
      <h2>{clock.toLocaleTimeString()}</h2>
    </div>
  )
}

export default Clock

 

App.js

import React from 'react'
import Clock from './module/Clock'

function App() {
  return (
    <div>
      <Clock />
    </div>
  )
}

export default App