[ React.js ] moment.js 라이브러리 사용 : format, add, startOf, endOf, isSameOrAfter, isSameOrBefore, clone

이번 감정 일기장 프로젝트에 moment.js 라이브러리를 사용한 내용을 정리하고자 한다. 

---

한국어로 사용하기

- 요일이나 시간 사용 시 영어로 뜨게 되는데, 한국어로 뜨게 하고 싶으면 따로 import 문을 추가해주면 된다.

import moment from "moment";
import "moment/locale/ko";

---

format 형식 지정 

- 원하는 방식으로 format을 설정할 수 있어 매우 편하다.

- 아래는 프로젝트에서 사용했던 format 설정 코드들이다. 

format("YYYY-MM-DDTHH:mm")
  // 2023-01-15T23:00 -> datetime-local input의 형식 

format("MM월 DD일 dddd") // 01월 15일 일요일 
format("LT") // 오후 11:00 
  
format("YYYY년 MM월 DD일 dddd") // 2023년 01월 15일 일요일
  
format("YYYY년 MM월") // 2023년 01월

---

날짜의 시작과 끝 구하기

- 시작 : startOf() 

- 끝 : endOf()

- clone()을 쓰지 않으면 원래의 값이 바뀌어버리기 때문에 clone()의 startOf와 endOf를 구한다.

const date = moment();

console.log(date);
// Moment<2023-01-15T23:26:10+09:00>

console.log(date.clone().startOf("month"));
// Moment<2023-01-01T00:00:00+09:00>

console.log(date.clone().endOf("month"));
// Moment<2023-01-31T23:59:59+09:00>

---

특정 날짜가 특정 구간에 속하는 지 구하기 

-  isSameOrAfter() 함수와 isSameOrBefore() 함수를 사용하여 특정 구간에 속하는 지 구할 수 있다.

moment.locale("ko");

const date = moment("2023-01-15");
const start = date.clone().startOf("month");
const end = date.clone().endOf("month");

console.log(date.isSameOrAfter(start)); //true
console.log(date.isSameOrBefore(end)); //true
console.log(date.isSameOrAfter(start) && date.isSameOrBefore(end)); //true

---

시간 더하기 / 빼기 : add()

- 특정 날짜의 한달 전, 한달 후, 일년 후 등을 구할 때에는 add() 함수를 사용한다.

- clone()을 사용하면 원래의 값이 바뀌는 것을 막을 수 있다. 

const date = moment("2023-01-15");

console.log(date.clone().add(-1, "day")); // Moment<2023-01-14T00:00:00+09:00>

console.log(date.clone().add(1, "month")); // Moment<2023-02-15T00:00:00+09:00>

console.log(date.clone().add(-1, "month")); // Moment<2022-12-15T00:00:00+09:00>

console.log(date.clone().add(1, "year")); // Moment<2024-01-15T00:00:00+09:00>