[리액트] moment, moment-timezone 모듈을 사용해 현재시간, 다른 나라 시간 데이터 불러오기

패키지 소개

momentjs

https://momentjs.com/

Moment.js | Home

 

현재 시간 표시하기 (위치에 기반한 현재 시간)

1. 모듈 설치하기

yarn add moment

2. 해당 모듈 import 해오기

import moment from 'moment';

3. 현재 시간 데이터를 원하는 형식에 맞춰 포맷하기

moment().format('YYYY-MM-DD HH:mm:ss')

4. useState 훅을 사용해 현재 시간 데이터를 상태값으로 지정한 후 사용

useState를 사용해 데이터를 저장하면 setter 함수로 저장한 데이터를 쉽게 변경할 수 있다

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

function Clock() {
  const [time, setTime] = useState(moment().format('YYYY-MM-DD HH:mm:ss'));

  return (
  <div>
    <h1>현재 시각</h1>
    <h1>{time}</h1>
  </div>
  )
}

export default Clock

 

다른 나라 시간 표시하기

1. 모듈 설치하기

yarn add moment-timezone

2. 해당 모듈 import 해오기

import moment from 'moment-timezone'

3. tz로 원하는 타임존 시간 데이터를 불러오기

moment뒤에 tz(’타임존이름’)을 추가해 해당 지역의 시간 데이터를 불러온다 

moment().tz('US/Pacific').format('YYYY-MM-DD HH:mm:ss')

4. 해당 지역 시간 데이터를 원하는 형식에 맞춰 포맷

moment().tz('US/Pacific').format('YYYY-MM-DD HH:mm:ss')

5. useState 훅을 사용해 지역 시간 데이터를 상태값으로 지정한 후 사용

useState를 사용해 데이터를 저장하면 setter 함수로 저장한 데이터를 쉽게 변경할 수 있다

import React, { useState } from 'react'
import moment from 'moment-timezone'

function Clock() {
  const [time, setTime] = useState(moment().tz('US/Pacific').format('YYYY-MM-DD HH:mm:ss'));

  return (
  <div>
    <h1>태평양 표준 시각</h1>
    <h1>{time}</h1>
  </div>
  )
}

export default Clock