리액트로 간단한 시계 만들기

리액트로 간단한 시계를 만들어보겠습니다.

 

import React, { useState, useEffect } from 'react';
import moment from 'moment';
function ClockContainer() {
  let timer: any = null;
  const [time, setTime] = useState(moment());
  useEffect(() => {
    timer = setInterval(() => {
      setTime(moment());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <div className="neon pink" style={{ fontFamily: 'alarm_clock' }}>
        {time.format('YYYY-MM-DD')}
      </div>
      <div className="neon blue"> {time.format('HH-mm-ss')}</div>
    </div>
  );
}

export default ClockContainer;

class와 style을 제외하고 코드를 살펴봅시다

moment 모듈은 시간 관련 모듈중에서 가장 많이 사용하고 직관적인 모듈인데

개인적으로 사용을 강추합니다.

일단 밑에 코드만 보시면 됩니다.

const [time, setTime] = useState(moment()); //useState 훅을 통해 time 값 디폴트 설정

 useEffect(() => {
    timer = setInterval(() => { //timer 라는 변수에 인터벌 종료를 위해 저장  
      setTime(moment()); // 현재 시간 세팅 
    }, 1000); //1000ms = 1s 간 반복 
    return () => {
      clearInterval(timer); // 함수 언마운트시 clearInterval 
    };
  }, []);

리액트 훅과 moment 모듈로 인해서 아주 간단하게 시계 컴포넌트를 작성할 수 있습니다.

해당 결과물은 다음과 같답니다

그냥 텍스트는 안이뻐서 네온 사인 css를 추가해봤습니다