안녕하세요. J4J입니다.
이번 포스팅은 Dayjs로 날짜 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
Dayjs란?
Dayjs는 날짜 처리를 간편하게 할 수 있도록 도와주는 라이브러리입니다.
일반적인 포매팅부터 시작하여 날짜를 어느 기준만큼 더하고 빼는 등의 산술 연산과 같은 날짜와 관련된 다양한 기능을 제공해줍니다.
Dayjs와 유사하게 사용되는 대표적인 날짜 라이브러리로 Momentjs가 있습니다.
Dayjs와 Momentjs 둘다 많은 개발자분들이 필요로 하는 여러 기능들을 대부분 제공해줍니다.
하지만 이 둘의 차이점은 라이브러리 크기에서 명확히 보여집니다.
Dayjs는 Momentjs와 비교했을 때 많은 경량화를 보인다고 합니다.
실제로 Dayjs와 Momentjs를 각각 설치해봤을 때 설치된 모듈들의 크기만 비교해봐도 상당히 많은 차이가 보인다는 것을 확인할 수 있었습니다.
또한 공식 문서에 따르면 설치된 모듈들뿐만 아니라 작성된 코드가 실행되는 등의 상황에서도 더 좋은 성능을 보인다고 합니다.
이처럼 눈에 띄는 경량화를 볼 수 있고 또한 기능적인 측면에서도 크게 다를 게 없다면 Momentjs보다는 Dayjs를 쓰는 것이 더 올바르다고 생각합니다.
설정 방법
[ 1. 패키지 설치 ]
$ npm install 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'
모든 설정이 완료되었다면 대표적으로 많이 사용될 것으로 보이는 기능들에 대해 간단히 보도록 하겠습니다.
날짜 Format
날짜 Format은 다음과 같은 형태로 작성할 수 있습니다.
import * as React from 'react';
import dayjs from 'dayjs';
const Format = () => {
return (
<div>
<p>{dayjs(new Date()).format('YYYY-MM-DD')}</p> {/* 2022-05-16 */}
<p>{dayjs(new Date()).format('YY-MM-DD')}</p> {/* 22-05-16 */}
<p>{dayjs(new Date()).format('YYYY/MM/DD HH:mm:ss')}</p> {/* 2022/05/16 01:29:07 */}
<p>{dayjs(new Date()).format('hh:mm:ss A')}</p> {/* 01:29:46 오전 */}
<p>{dayjs('20220516 013023').format('hh:mm:ss A')}</p> {/* 01:30:23 오전 */}
</div>
)
}
export default Format;
먼저 Format이 이루어질 날짜 입력 부분부터 보겠습니다.
dayjs를 이용해 입력할 수 있는 날짜 타입은 다음과 같습니다.
string | number | Date | dayjs.Dayjs | null | undefined
그렇기 때문에 위와 같이 new Date(), string 값들을 입력해줄 수도 있고 또한 dayjs로 포맷팅이 이루어진 값들도 넣어줄 수 있습니다.
다음으로 Format이 이루어지는 규칙입니다.
관련된 규칙은 공식 문서에 있는 Format 규칙을 확인해주시길 바랍니다.
Get
날짜 값을 받아오는 방법은 다음과 같습니다.
import * as React from 'react';
import dayjs from 'dayjs';
const Get = () => {
return (
<div>
<p>{dayjs(new Date()).format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/05/16 01:44:49 */}
<p>{dayjs(new Date()).get('second')}</p> {/* 49 */}
<p>{dayjs(new Date()).get('minute')}</p> {/* 44 */}
<p>{dayjs(new Date()).get('hour')}</p> {/* 1 */}
<p>{dayjs(new Date()).get('date')}</p> {/* 16 */}
<p>{dayjs(new Date()).get('month') + 1}</p> {/* 5, 월은 0부터 시작 */}
<p>{dayjs(new Date()).get('year')}</p> {/* 2022 */}
</div>
)
}
export default Get;
사용되는 단위들의 축약형은 Get을 확인해주시길 바랍니다.
추가적으로 Get으로 확인할 수 있는 값을 object로도 전달받을 수 있습니다.
그러기 위해서는 다음과 같이 플러그인 설치 및 등록을 먼저 해주시길 바랍니다.
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'); // 언어 등록
/**
* get object 추가
*/
import toObject from 'dayjs/plugin/toObject'; // 날짜 get object 플러그인
dayjs.extend(toObject); // 플러그인 등록
ReactDom.render(<App />, document.querySelector('#root'));
그런 뒤 다음과 같이 사용해주시면 됩니다.
import * as React from 'react';
import dayjs from 'dayjs';
const Get = () => {
React.useEffect(() => {
console.log(dayjs(new Date()).toObject());
}, [])
...
}
export default Get;
덧셈 / 뺄셈
먼저 덧셈은 다음과 같이 add()를 이용하여 사용해줄 수 있습니다.
import * as React from 'react';
import dayjs from 'dayjs';
const Calc = () => {
return (
<div>
<p>{dayjs(new Date()).format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/05/16 01:38:48 */}
<p>{dayjs(new Date()).add(1, 'second').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/05/16 01:38:49 */}
<p>{dayjs(new Date()).add(1, 'minute').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/05/16 01:39:48 */}
<p>{dayjs(new Date()).add(1, 'hour').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/05/16 02:38:48 */}
<p>{dayjs(new Date()).add(1, 'day').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/05/17 01:38:48 */}
<p>{dayjs(new Date()).add(1, 'week').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/05/23 01:38:48 */}
<p>{dayjs(new Date()).add(1, 'month').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/06/16 01:38:48 */}
<p>{dayjs(new Date()).add(1, 'year').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2023/05/16 01:38:48 */}
</div>
)
}
export default Calc;
만약 뺄셈을 원하시는 분들은 add를 subtract로 변경해주시면 됩니다.
하지만 굳이 subtract를 사용하지 않더라도 add를 이용해 다음과 같이 사용해줄 수도 있습니다.
import * as React from 'react';
import dayjs from 'dayjs';
const Calc = () => {
return (
<div>
<p>{dayjs(new Date()).format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2022/05/16 01:38:48 */}
<p>{dayjs(new Date()).subtract(1, 'year').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2021/05/16 01:38:48 */}
<p>{dayjs(new Date()).add(-1, 'year').format('YYYY/MM/DD hh:mm:ss')}</p> {/* 2021/05/16 01:38:48 */}
</div>
)
}
export default Calc;
사용되는 단위들의 축약형은 덧셈/뺄셈을 확인해주시길 바랍니다.
Difference
날짜 차이를 확인하는 방법은 다음과 같습니다.
import * as React from 'react';
import dayjs from 'dayjs';
const Diff = () => {
const targetDate = dayjs('2023-01-01 00:00:00');
return (
<div>
<p>{targetDate.diff(new Date(), 'second')}</p> {/* 19864970 */}
<p>{targetDate.diff(new Date(), 'minute')}</p> {/* 331082 */}
<p>{targetDate.diff(new Date(), 'hour')}</p> {/* 5518 */}
<p>{targetDate.diff(new Date(), 'day')}</p> {/* 229 */}
<p>{targetDate.diff(new Date(), 'week')}</p> {/* 32 */}
<p>{targetDate.diff(new Date(), 'month')}</p> {/* 7 */}
<p>{targetDate.diff(new Date(), 'year')}</p> {/* 0 */}
</div>
)
}
export default Diff;
사용되는 단위들의 축약형은 Difference를 확인해주시길 바랍니다.
이상으로 Dayjs로 날짜 처리하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > React' 카테고리의 다른 글
| [React] Nivo 차트 사용하기 (0) | 2022.06.04 |
|---|---|
| [React] 카카오 주소 검색 사용하기 (0) | 2022.05.28 |
| [React] Storybook으로 컴포넌트 문서화하기 (0) | 2022.05.14 |
| [React] react-hook-form과 React.forwardRef() 에러 (0) | 2022.05.07 |
| [React] react-hook-form을 이용하여 validation (유효성) 처리하기 (0) | 2022.05.02 |
댓글