리액트 날짜 형식 수정하기, Moment 라이브러리 초간단 사용방법

 

리액트로 일기장을 만드는 토이 프로젝트 중에 날짜 형식을 바꾸고 싶었다. 

 

현재 날짜 형식

 

클라이언트에서 보내주는 날짜는 아래와 같다. 

new Date()

 

나는 2022년 07월 20일 이런 형식으로 나타내고 싶었고, 내가 아는 자바스크립트 문법으로 아래와 같이 코드를 짰다. 

 

 const year = data.date.getFullYear();
 const month ={data}.date.getMonth() + 1;
 const date = {data.date}.getDate();
 const showFilteredDate = `${year}년${month <= 10 ? "0" + month : month}월${
   date <= 10 ? "0" + date : date}일`

 

그런데 답답하게도 화면은 흰 화면만 나왔다. 

 

 

---

그래서 다른 방법을 찾아보다가 날짜 형식을 바꿔주는 라이브러리를 찾았다!!

 

바로바로 Moment 라이브러리!

 

사용방법

 

1. install 해주기

$ npm install moment --save

2. 사용하고자 하는 파일에서 import 해주기

import moment from 'moment';

3. 사용하기

const nowTime = moment().format('YYYY년MM월DD일 HH:mm:ss');

 

---

실제 사용 예시

import React from "react";
import moment from "moment";

const DiariesDate = (date) => {
  const nowTime = moment(date.date).format("YYYY년MM월DD일");

  return (
    <div className='expense-date'>
      <div className='expense-date__month'>{nowTime}</div>
    </div>
  );
};

export default DiariesDate;

 

 

참고)

 

https://kimtongting.tistory.com/entry/React-date-format-moment

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓