[React] day.js 사용법 (날짜, 시간 라이브러리)

Moment.js가 많이 보여서 사용하려했는데 개발중단이 되었다 하여 Day.js를 사용하였다.(경량화에서도 우수)

https://www.npmjs.com/package/dayjs

dayjs

 

사용방법은 아래 블로그)

https://jforj.tistory.com/267

[React] Dayjs로 간편하게 날짜 처리하기

 

설정 방법

 

[ 1. 패키지 설치 ]

npm i dayjs

 

[ 2. index.tsx에 dayjs 설정 ]

 

import * as React from 'react';
import ReactDom from 'react-dom';
import App from './App';

/**
 * dayjs 설정
 */
import dayjs from 'dayjs';
import isLeapYear from 'dayjs/plugin/isLeapYear'; // 윤년 판단 플러그인
import 'dayjs/locale/ko'; // 한국어 가져오기

dayjs.extend(isLeapYear); // 플러그인 등록
dayjs.locale('ko'); // 언어 등록


ReactDom.render(<App />, document.querySelector('#root'));

 

 

관련되어서 저와 같이 타입 스크립트를 이용하여 설정하시는 분들은 개발하시는 프로젝트의 tsconfig.json을 확인 부탁드립니다.

그리고 다음과 같은 설정이 되어 있는지 확인 부탁드립니다.

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
  }
}

 

해당 설정이 되어 있다면 dayjs를 로드해올 때 다음과 같이 사용해야 합니다.

import dayjs from 'dayjs'

 

하지만 반대로 설정이 되어 있지 않으면 dayjs를 로드해올 때 다음과 같이 사용해야 합니다.

import * as dayjs from 'dayjs'

 

---

유닉스타임스탬프를 한국현지시간으로 출력하기

위에서 index.tsx에 설정한다고 되어있었는데 그냥 안하고 해당 사용 파일에서 아래 import만 해줘도 진행돼서 설치후 이것만 함

import dayjs from 'dayjs';

 

나는 기존 서버에서 전달된 Unix TimeStamp를 한국날짜로 변환하고 싶었다.

여기서 타임스탬프는 10자리로 밀리초(13자리)가 아닌 초 단위다.

dayjs.unix(1318781876)

이렇게 dayjs.unix() 안에 기존 타임스탬프를 넣으면 

dayjs(타임스탬프 * 1000)으로 구현되므로  밀리초로 변환된다.

 

그리고 아래를 통해 format을 한 한국날짜를 출력할 수 있다.

dayjs.unix(Number(timestamp)).format('YYYY-MM-DD');

 

아래는 해당 전체 코드 (timestamp 매개변수는 유닉스타임스탬프값임)

import dayjs from 'dayjs';

export default function unix_timeStamp(timestamp) {
  let date = '';
  if (timestamp !== undefined) {
    date = dayjs.unix(Number(timestamp)).format('YYYY-MM-DD HH:mm:ss');
  } else {
    date = dayjs().format('YYYY-MM-DD HH:mm:ss');//이건 현재시간이 출력됨
  }
  return date;
}

 

타임스탬프의 한국 현지시간으로 출력됨

 

 

아래 Day.js 사이트에서 사용방법에 대해 나와있다.

https://day.js.org/docs/en/parse/unix-timestamp

Day.js · 2kB JavaScript date utility library

 

 

---

+

만약 Timezone으로 다른 나라의 현지 시간을 구하고 싶다면?

 

timezone관련 플러그인을 아래와 같이 세팅 후, 아래와 같이 기존 유닉스타임스탬프를 변환한 값과 타임존나라명을 dayjs.tz의 매개변수로 전달, format해준다.

import dayjs from 'dayjs';

import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault('Asia/Seoul');

export default function unix_timeStamp(timestamp, lang) {
  let date = '';
  if (timestamp !== undefined) {
    let dats = dayjs.unix(Number(timestamp));

    date = dayjs.tz(dats, 'America/New_York').format('YYYY-MM-DD HH:mm:ss');
  } else {
  }
  return date;
}

 

그럼 타임스탬프는 한국 현지시간과 다르게 뉴욕의 시간으로 시간이 출력된다.

 

https://day.js.org/docs/en/timezone/set-default-timezone

Day.js · 2kB JavaScript date utility library