[React] moment 라이브러리

---

관리자의 집 프로젝트 진행중 react-calendar 라이브러리 사용중 formatDay, formatYear 속성의 date를 원하는 형식으로 편리하게 변환하기 위해날짜를 원하는 형식으로 변환하는데 편리한 moment 라이브러리를 알게되어 기록해본다.

moment 라이브러리란?

JavaScript에서 가장 많이 사용되어 온 날짜 라이브러리로
원하는 날짜 형식으로 변환할 때 유용하고, 날짜간의 차이를 구하는 것도 편리하게 해주는 유용한 라이브러리다.

moment 라이브러리 설치

npm install moment  # npm
yarn add moment     # Yarn

moment 메서드(method)

주로 사용되는 메서드는 다음과 같은 것들이 있다.

format(): 지정된 형식으로 날짜를 포맷합니다.

날짜를 원하는 형식으로 변경해서 출력하고 싶을 떄 사용한다.

const date1 = moment().format("YYYY년 MM월 DD일");
const date2 = moment().format("YYYY-MM-DD");
const date3 = moment().format("YYYY.MM.DD");
console.log(date1); // 2024년 04월 13일
console.log(date2); // 2024-04-13
console.log(date3); // 2024.04.13

// 특정 데이터만 제외할 수도 있다
const dayNoneDate = moment().format("YYYY.MM");
console.log(dayNoneDate); // 2024.04

🚫 주의
반드시 년도(year), 달(month), 일(day)을 영문 대문자로 표현해야 한다.
EX) YYYY, MM, DD

---

add(): 날짜에서 일, 월, 년 등을 더한다.

추가 가능한 단위

• 년(years)
• 월(months)
• 일(days)
• 시간(hours)
• 분(minutes)
• 초(seconds)
• 밀리초(milliseconds)

const futureDate = moment().add(7, "days").format("YYYY-MM-DD");
console.log(futureDate); // 2024-04-20

🚫 주의
더하려는 단위에 표준어를 사용해주어야 한다.
EX) 분을 더하려면 minutes

---

subtract(): 날짜에서 일, 월, 년 등을 뺍니다.

add() 메서드와 반대로 빼주는 기능을 한다. 빼기 가능한 단위로는 add() 메서드와 같다.

const pastDate = moment().subtract(1, "months").format("YYYY.MM.DD"); // 현재 날짜에서 1달 전 날짜
console.log(pastDate); // 2024-03-13

---

fromNow(): 현재 날짜와의 차이를 상대적으로 표시합니다.

주로 다른 날짜 data가 이미 있으며 현재 날짜와의 차이를 구하고 싶을 떄 사용된다.

const relativeTime = moment("2023-04-10").fromNow();
console.log(relativeTime); // "2 years ago"

---

diff(): 두 날짜 간의 차이를 계산한다.

주로 두 날짜의 차이를 계산할 때 사용된다.

const diffInDays = moment("2024-04-30").diff("2024-04-01", "month");

diff의 인자

• 첫번쨰 인자로는 비교할 날짜를 입력받는다.
• 두번째 인자로는 비교하고 싶은 날짜 단위를 입력하며. 주로 ‘years’, ‘months’, ‘weeks’, ‘days’, ‘hours’, ‘minutes’, ‘seconds’ 등이 있다.

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.