[개발] react 에서 날짜를 보기 좋게 표현하는 방법

안녕하세요 @realmankwon 입니다.

React에서 날짜를 보기 좋게 표현하는 방법은 여러 가지가 있습니다.

1. moment.js 라이브러리 사용하기

moment.js는 JavaScript 날짜 및 시간 라이브러리로, 날짜를 쉽게 파싱하고 포맷팅할 수 있습니다. React에서 moment.js를 사용하면 다음과 같이 날짜를 표시할 수 있습니다.

import moment from 'moment';

const date = new Date();
const formattedDate = moment(date).format('MMMM Do YYYY, h:mm:ss a');

return <div>{formattedDate}</div>;

2 . Intl.DateTimeFormat 사용하기

Intl.DateTimeFormat는 JavaScript 내장 라이브러리로, 날짜를 다양한 언어와 지역에 맞게 표현할 수 있습니다. React에서 Intl.DateTimeFormat를 사용하면 다음과 같이 날짜를 표시할 수 있습니다.

const date = new Date();
const formattedDate = new Intl.DateTimeFormat('ko-KR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
}).format(date);

return <div>{formattedDate}</div>;

3 . date-fns 라이브러리 사용하기

date-fns는 moment.js와 유사한 JavaScript 날짜 및 시간 라이브러리로, 날짜를 쉽게 파싱하고 포맷팅할 수 있습니다. React에서 date-fns를 사용하면 다음과 같이 날짜를 표시할 수 있습니다.

import { format } from 'date-fns';

const date = new Date();
const formattedDate = format(date, 'MMMM do yyyy, h:mm:ss a');

return <div>{formattedDate}</div>;

이외에도 다른 라이브러리나 방법도 있을 수 있습니다. 사용하는 라이브러리나 요구사항에 맞게 적절한 방법을 선택하면 됩니다.