라이브러리
- Date 관련(날짜 표기/계산 도구)
- 스타일링 관련(스타일링을 조금 더 편하게 도와주는 도구)
- 디자인 UI 관련(미리 해둔 스타일링을 제공하는 도구)
- 애니메이션 관련(애니메이션 기능을 미리 구현해두고 제공하는 도구)
- 모킹 관련(데이터 페칭을 대체해주는 도구)
- 상태 관리 관련(컴포넌트의 상태 관리를 도와주는 도구)
- 데이터 페칭 관련(네트워크 통신을 도와주는 도구)
- GraphQL(REST API를 대체하는 도구)
- Next.js(SSR 등 최신 프론트엔드 기술을 제공해주는 도구)
정리
Time/Date 라이브러리
Moment
npm install moment
npm install moment-timezone예제
뉴욕 시간대에서
2018년 3월 10일 13시에 하루 더하기,
2018년 3월 10일 13시에 24시간 더하기
import React, {useState, useRef} from 'react'
import moment from 'moment-timezone'
import "moment/locale/ko"
<div>Summer Time (New-York)</div>
<div>
2018년 3월 10일 13시에 하루 더하기:
{moment.tz("2018-03-10 13:00:00", "America/New_York").add(1, "day").format()}
</div>
<div>
2018년 3월 10일 13시에 하루 더하기:
{moment.tz("2018-03-10 13:00:00", "America/New_York").add(24, "hour").format()}
</div>한국 시간대에서
2017년 1월 1일에 1년 빼기,
2017년 1월 1일에 365일 빼기
<div>Leap year (korea)</div>
<div>
2017년 1월 1일에 1년 빼기:
{moment("2017-01-01").subtract(1, "year").format()}
</div>
<div>
2017년 1월 1일에 365일 빼기:
{moment("2017-01-01").subtract(365, "day").format()}
</div>DD-MM-YYYY 형식의 날짜를 YYYY년 M월 D일로 표기하기
<div>한국어로 표기 07-17-2021을 2021년 7월 17일로 표기</div>
<div>{moment("07-17-2021").format("YYYY년 M월 D일")}</div>자기 생일이 무슨 요일인지 알아내기
<div>자기 생일 요일 찾기</div>
<div>
<input type="date" ref={birthDayRef} onChange={handleBirthDayChange}/>
<div>무슨 요일이었을까?</div>
<div>{day}</div>
</div>두 날짜 비교
<div>두 날짜 비교</div>
<div>2021-07-17 03:00와 2021-07-18 02:00는 몇 시간 차이인가?</div>
<div>{`${moment("2021-07-17 03:00").diff(moment("2021-07-18 02:00"), "hours")}시간`}</div>정리
👉 결론
moment의 용량이 너무 커서 최신 트렌드를 따라가지 못한다.
더이상 업데이트가 되지 않아서 다른 라이브러리를 사용하는 것을 추천..!
Day.js
- 2KB
- 간결하다.
- Immutable
- I18n
npm install dayjs예제
자기 생일이 무슨 요일인지 알아내기
import "dayjs/locale/ko"
dayjs.locale("ko");
const birthDayRef = useRef(null);
const [day, setDay] = useState("");
const handleBirthDayChange = (event) => {
setDay(dayjs(event.target.value, "YYYY-MM-DD").format("dddd"));
}
<div>자기 생일 요일 찾기</div>
<div>
<input type="date" ref={birthDayRef} onChange={handleBirthDayChange}/>
<div>무슨 요일이었을까?</div>
<div>{day}</div>
</div>정리
👉 결론
최대 장점은 바로 가볍다는 것!
문서도 정갈하다. 간단한 기능들을 적용할 때 좋을 것 같다.
쓰다가 필요한 기능이 추가로 있다면 다른 라이브러리를 고려해봐도 괜찮을 듯 하다.
date-fns
커버리지가 제일 높은 라이브러리이다.
- Most comprehensive
- Modulart support tree-shaking
- Immutable & Pure & FP & I18n
npm install date-fns date-fns-tz예제
import React, {useState, useRef} from 'react'
import {add, format, sub, differenceInHours} from 'date-fns';
import {format as timezoneFormat} from 'date-fns-tz'
import addWeeks from 'date-fns/addWeeks';
import { ko } from 'date-fns/locale'
export default function DateFnsExample() {
const birthDayRef = useRef(null);
const [day, setDay] = useState("");
const handleBirthDayChange = (event) => {
setDay(format(new Date(event.target.value), "EEEE", {locale: ko}));
}
const dateFnsDate = new Date();
const newDateFnsDate = add(dateFnsDate, {days: 1});
const newDateFnsDate2 = addWeeks(newDateFnsDate, 1);
return (
<div>
<h1>date-fns</h1>
<div>Immutable Check</div>
<div>
{format(dateFnsDate, "yyyy-MM-dd")}
<br />
{format(newDateFnsDate, "yyyy-MM-dd")}
<br />
{format(newDateFnsDate2, "yyyy-MM-dd")}
</div>
<br />
<div>Summer Time (New-York)</div>
<div>
2018년 3월 10일 13시에 하루 더하기:
{timezoneFormat(add(new Date("2018-03-10 13:00:00"), {days: 1}), "yyyy-MM-dd HH:mm:ssXXX", {timeZone: "America/New_York"})}
</div>
<div>
2018년 3월 10일 13시에 24시간 더하기:
{timezoneFormat(add(new Date("2018-03-10 13:00:00"), {hours: 24}), "yyyy-MM-dd HH:mm:ssXXX", {timeZone: "America/New_York"})}
</div>
<br />
<div>Leap year (korea)</div>
<div>
2017년 1월 1일에 1년 빼기:
{format(sub(new Date("2017-01-01"), {years: 1}), "yyyy-MM-dd")}
</div>
<div>
2017년 1월 1일에 365일 빼기:
{format(sub(new Date("2017-01-01"), {days: 365}), "yyyy-MM-dd")}
</div>
<br />
<div>한국어로 표기 07-17-2021을 2021년 7월 17일로 표기</div>
<div>{format(new Date("07-17-2021"), "yyyy년 MM월 dd일")}</div>
<br/>
<div>자기 생일 요일 찾기</div>
<div>
<input type="date" ref={birthDayRef} onChange={handleBirthDayChange}/>
<div>무슨 요일이었을까?</div>
<div>{day}</div>
</div>
<br />
<div>두 날짜 비교</div>
<div>2021-07-17 03:00와 2021-07-18 02:00는 몇 시간 차이인가?</div>
<div>{`${differenceInHours(new Date("2021-07-17 03:00"), new Date("2021-07-18 02:00"))}시간`}</div>
</div>
)
}정리
👉 결론
사이즈가 괜찮다.(특정 함수만 사용하면 훨씬 더 작게 사용할 수 있었다.)
객체를 기반으로 하지 않고 FP(함수형 프로그래밍)을 기반으로 한다.
라이브러리를 고르는 기준
- 가벼운 게 최우선이라면 Day.js
- FP 패러다임을 따르거나 tree-shaking이 필요하다면 date-fns
- Moment는 기능, 성능, Mutable은 그럭저럭이나 사이즈가 너무 크고, tree-shaking, 관리, 문서 가독성이 좋지 않다.
🤔 라이브러리 선택에 도움을 주는 도구들
🙋♀️