리액트[React] - 현재 시간 표시 및 실시간 시계(live-clock) 만들기

React - react-live-clock 

---

React + Express 활용한 라즈베리파이 관련 IoT 프로젝트 개발 막바지에 상단에 실시간 시계 표시 기능 추가 요청이 들어왔습니다. 전체적으로 짜임새 있고 구조적으로 소스코드를 관리해왔던지라 해당 부분을 component로 구성하고 싶어 이와 관련된 라이브러리가 있어 소개해 봅니다.

불과 몇 분만에 뚝딱 구성해서 적은 코드로 타임존 까지 국가별로 완벽하게 구성 할 수 있었습니다. React 관련 open-library의 장점이라 생각합니다. 

React, React Native 관련 프로젝트 진행 중이신 분들께 도움이 되길 바라면서 이와 관련 된 자세한 사용 방법은 문서 하단에서 기술하겠습니다.

React 관련 포스팅  :  React 참고

React - Sample Source Code

아래와 같은 코드로 구성할 수 있으며,  timezone부분은 생략 시에 브라우저 기준으로 동작합니다.

timezone에 들어갈 수 있는 옵션은 이 곳을 참고해 주세요. 

import React, { Component } from 'react';
import Clock from 'react-live-clock';
 
class LiveClockTest extends Component {
    render() {
        return (
            <div>
                {/* format 부분에서 원하는 날짜 형식으로 변경 가능, 타임존 변경 가능*/}
                <Clock format={'YYYY 년 MM 월 DD 일 HH:mm:ss'} ticking={true} timezone={'US/Pacific'}/>
            </div>
        )
    }
}
 
export default LiveClockTest;

react-live-clock은 moment.js 기반으로 만들어졌어요. format 형식은 이 곳을 참고해 주세요.

React - 설치 및 실행화면

 react-live-clock을 사용하기 위해서는 먼저 npm으로 설치를 해야 합니다.

빌드 후 브라우저에서 실행해보시면 아래와 같이 동작하는 화면을 확인하실 수 있습니다. 

마무리

개발 경력이 쌓이면서 Front 분야 역시 학습할 영역이 많아지고 있다는 것을 깨닫게 됩니다. 하루하루 쏟아져 나오는 새로운 영역에서 적합한 기술을 채택해서 요구에 맞는 아웃풋이 나올 수 있도록 최선을 다해서 공부에 매진해 봅니다.

참고문헌

React-Live-Clock 관련 레퍼런스(Reference) : 이동