[React] 시간 형식 지정하기

---

게시판을 만들다 보니 등록일을 출력할 형식이 필요했다.

물론 일반적으로는 yyyy-mm-dd로 사용하겠지만

주 이용자가 한국인이기 때문에 시간의 형식을 '-년 -월 -일 -시 -분'의 형식으로 출력하고 싶었다.

---

 

이를 위해서 여러 자료들을 찾아보니 Moment.js를 사용하면 간편하게 될 것 같았다.

Moment.js는 시간이 포함된 데이터를 받아서 조작할 경우 사용 가능한 라이브러리 중 하나이다.

 

SETUP

//Moment 라이브러리 설치
npm i moment

 

HOW-TO

import Moment from 'moment';

const changeTime = (record) => {
    const createdTime = Moment(record.createdAt).format('YYYY년 MM월 DD일 HH시 MM분 DD초');
    
    return(
        <Input value={createdTime} readOnly='readonly' />
    );
}

export default changeTime;

 

DB에 datetime 형식으로 저장된 데이터를 이렇게 받아오면 아래처럼 원하던 대로 한국어 형식으로 화면에 출력이 가능하다.

 

react에서 한국어로 날짜 출력

 

이를 활용하면 이뿐만 아니라 다양한 방법으로 날짜를 표시할 수 있다.

 

 

 

---

Reference

1) 'React에서 react-moment, moment.js 사용하기', SaDevelog : haranglog.tistory.com/10

2) 'react datetime 한글(년월일)로 변경하기', 쌀 팔다 개발자 : daeguowl.tistory.com/184