date-fns 사용 방법 - JavaScript 날짜 라이브러리

date-fns 사용 방법 - JavaScript 날짜 라이브러리

 

date-fns 는 많은 JavaScript 날짜 관련 라이브러리 중 Tree shaking을 지원하고 Functional Pattern 으로 동작하는 라이브러리입니다.

date-fns 또한 굉장히 많이 사용되는 날짜 라이브러리 입니다.

 

그럼 date-fns 사용 방법에 대해 알려드리도록 하겠습니다.

 

date-fns 사용 준비

npm install date-fns

npm을 통해 date-fns 를 설치하여 사용합니다.

 

date-fns도 moment.js나 day.js 처럼 date-fns 모듈 객체를 불러와서 사용이 가능합니다.

const dateFns = require("date-fns");	// 83.4K (gzipped: 19.4K)

var date1 = new Date("2021-10-20");
console.log(date1); // Wed Oct 20 2021 09:00:00 GMT+0900 (한국 표준시)

var date2 = add(date1, { days: 1 });
console.log(date2); // Thu Oct 21 2021 09:00:00 GMT+0900 (한국 표준시)

하지만 date-fns는 moment.js나 day.js와 다르게 Tree shaking을 지원하고 Functional 하게 사용하므로,

그 장점을 살려 사용에 필요한 함수를 import 하여 사용하시는 것이 불필요한 함수에 용량을 사용하지 않을 수 있습니다.

 

가령 위의 예제에서는 add() 함수만을 사용하고 있으므로 날짜 더하기 기능을 하는 함수 add()를 사용하기위해서는,

// date-fns의 add만 들어있는 date-fns/add 에서 add 사용
import add from "date-fns/add";	// 1.8K (gzipped: 902)
// date-fns의 모든 함수가 들어있는 date-fns 에서 add 사용
import { add } from "date-fns";	// 1.8K (gzipped: 904)
// OR
var add = require("date-fns/add");	// 2K (gzipped: 983)

var date1 = new Date("2021-10-20");
console.log(date1); // Wed Oct 20 2021 09:00:00 GMT+0900 (한국 표준시)

var date2 = add(date1, { days: 1 });
console.log(date2); // Thu Oct 21 2021 09:00:00 GMT+0900 (한국 표준시)

위와 같이 add() 함수를 import 하여 사용하면 됩니다.

즉, 필요한 함수만을 Import 하여 사용하고 용량도 아낄 수 있습니다.

용량의 차이를 보여드리기 위해 import 했을때의 용량도 적어뒀습니다.

 

date-fns 사용 방법

date-fns에서 많이 사용하는 함수들에 대해서 사용방법을 간단하게 알려드리도록 하겠습니다.

import는 편의상 import { "함수명" } from "date-fns"; 으로 통일하여 알려드리도록 하겠습니다.

 

날짜 및 시간 객체 생성 - new Date() (기본 JavaScript Date 사용)

const date1 = new Date(); // Mon Oct 11 2021 19:42:26 GMT+0900 (한국 표준시)
const date2 = new Date("2021-10-20"); // Wed Oct 20 2021 09:00:00 GMT+0900 (한국 표준시)

날짜 및 시간 객체 생성은 기본적으로 JavaScript에서 제공하는 Date()를 사용하시면 됩니다.

 

포맷 지정 - format()

import { format } from "date-fns";

var date = new Date("2021-10-11 10:30:25"); // Mon Oct 11 2021 10:30:25 GMT+0900 (한국 표준시)

format(date, "yy-MM-dd"); // 21-10-11
format(date, "dd/MM/yy"); // 11/10/21
format(date, "yyyy.MM.dd HH:mm:ss"); // 2021.10.11 10:30:25

format() 함수를 사용하여 원하는 형태를 입력하고 원하는 형태의 문자열로 변경할 수 있습니다.

 

날짜 객체의 원하는 시간 단위 값 구하기 - get

import {
  getYear,
  getMonth,
  getDate,
  getDay,
  getHours,
  getMinutes,
  getSeconds,
  getMilliseconds,
  format
} from "date-fns";

var date = new Date("2021-10-11 10:30:25.495"); // Mon Oct 11 2021 10:30:25 GMT+0900 (한국 표준시)

format(date, "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 10:30:25.495

getYear(date); // 2021 (년)

getMonth(date); // 9 (월 - 0~11)

getDate(date); // 11 (일)

getDay(date); // 1 (요일 - 일요일 : 0, 토요일 : 6)

getHours(date); // 10 (시)

getMinutes(date); // 30 (분)

getSeconds(date); // 25 (초)

getMilliseconds(date); // 495 (밀리초)

get시간단위() 함수를 사용하여 날짜 객체에서 원하는 시간 단위의 값을 구할 수 있습니다.

 

날짜 객체의 원하는 시간 단위 값 변경 - set()

import {
  set,
  setYear,
  setMonth,
  setDate,
  setDay,
  setHours,
  setMinutes,
  setSeconds,
  setMilliseconds,
  format
} from "date-fns";

var date = new Date("2021-10-11 10:30:25.495"); // Mon Oct 11 2021 10:30:25 GMT+0900 (한국 표준시)

format(date, "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 10:30:25.495

format(
  set(date, {
    year: 2022,
    month: 11,
    date: 25,
    hours: 15,
    minutes: 45,
    seconds: 10,
    milliseconds: 785,
  }),
  "yyyy-MM-dd HH:mm:ss.SSS"
); // 2022-12-25 15:45:10.785

format(setYear(date, 2022), "yyyy-MM-dd HH:mm:ss.SSS"); // 2022-10-11 10:30:25.495

format(setMonth(date, 11), "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-12-11 10:30:25.495

format(setDate(date, 25), "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-25 10:30:25.495

format(setDay(date, 5), "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-15 10:30:25.495

format(setHours(date, 15), "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 15:30:25.495

format(setMinutes(date, 45), "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 10:45:25.495

format(setSeconds(date, 10), "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 10:30:10.495

format(setMilliseconds(date, 785), "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 10:30:25.785

set() 함수를 사용하여 날짜 객체에서 원하는 시간 단위의 값을 변경할 수 있습니다.

setYear(), setMonth(), setDate(), setDay(), setHours(), setMinutes(), setSeconds(), setMillisecons() 등을 따로 사용할 수도있습니다.

날짜 및 시간 더하기 - add()

import { add, format } from "date-fns";

var date = new Date("2021-10-11 10:30:25.495"); // Mon Oct 11 2021 10:30:25 GMT+0900 (한국 표준시)

format(date, "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 10:30:25.495

format(
  add(date, {
    years: 1,
    months: 2,
    weeks: 1,
    days: 7,
    hours: 5,
    minutes: 15,
    seconds: 10,
  }),
  "yyyy-MM-dd HH:mm:ss.SSS"
); // 2022-12-25 15:45:35.495

add() 함수를 사용하여 원하는 날짜 및 시간을 더할 수 있습니다.

add() 역시 addYears(), addMonths(), addWeeks(), addDays(), addHours(), addMinutes(), addSeconds(), addMilliseconds() 등을 따로 사용할 수 있습니다.

※ 더하는 숫자에 음수를 입력하면 빼기로도 사용할 수 있습니다.

 

날짜 및 시간 빼기 - sub()

import { sub, format } from "date-fns";

var date = new Date("2021-10-11 10:30:25.495"); // Mon Oct 11 2021 10:30:25 GMT+0900 (한국 표준시)

format(date, "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 10:30:25.495

format(
  sub(date, {
    years: 1,
    months: 5,
    weeks: 4,
    days: 5,
    hours: 2,
    minutes: 15,
    seconds: 10,
  }),
  "yyyy-MM-dd HH:mm:ss.SSS"
); // 2020-04-08 08:15:15.495

sub() 함수를 사용하여 원하는 날짜 및 시간을 뺄 수 있습니다.

sub() 역시 subYears(), subMonths(), subWeeks(), subDays(), subHours(), subMinutes(), subSeconds(), subMilliseconds() 등을 따로 사용할 수 있습니다.

※ 더하는 숫자에 음수를 입력하면 더하기로도 사용할 수 있습니다.

 

날짜 및 시간 차이 구하기 - differenceIn

import {
  differenceInYears,
  differenceInMonths,
  differenceInWeeks,
  differenceInDays,
  differenceInHours,
  differenceInMinutes,
  differenceInSeconds,
  differenceInMilliseconds,
  format
} from "date-fns";

var date1 = new Date("2021-10-11 10:30:25.495");
var date2 = new Date("2020-04-08 13:25:30.000");

format(date1, "yyyy-MM-dd HH:mm:ss.SSS"); // 2021-10-11 10:30:25.495
format(date2, "yyyy-MM-dd HH:mm:ss.SSS"); // 2020-04-08 13:25:30.000

differenceInYears(date1, date2); // 1

differenceInMonths(date1, date2); // 18

differenceInWeeks(date1, date2); // 78

differenceInDays(date1, date2); // 550

differenceInHours(date1, date2); // 13221

differenceInMinutes(date1, date2); // 793264

differenceInSeconds(date1, date2); // 47595895

differenceInMilliseconds(date1, date2); // 47595895495

differenceIn시간단위() 함수를 사용하여 두 날짜의 차이를 구할 수 있습니다.

 

이 밖에도 date-fns는 많은 날짜 라이브러리들이 제공하는 isAfter(), isBefore(), isEqual() 등 아주 다양한 기능을 제공하고 있으니,

더 자세한 사항은 공식문서를 참고하시길 바랍니다.

date-fns는 작은 사이즈와, Tree shaking을 지원되는 정말 좋은 라이브러리이니 잘 사용하시길 바랍니다.

 

그럼 이상으로 date-fns 사용 방법에 대한 설명을 마치도록 하겠습니다.

 

 

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

피드백도 언제나 환영입니다!

 

감사합니다.

 

참고 자료 : https://date-fns.org/