React 날짜 포맷

React에서 어떻게 날짜를 포맷팅 했는지 정리.

 

 

Intl.DateTimeFormat

JavaScript 내장 라이브러리로 Intl.DateTimeFormat을 사용해 날짜를 포맷팅 할 수 있다.

별도의 라이브러리 설치를 하지 않아도 되고, import 역시 할 필요가 없기 때문에 최소한 알고는 있어야 한다고 생각해 정리한다.

 

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>
)

 

date 객체를 만들어두고 Intl.DateTimeFormat을 통해 표현하고자 하는 범위까지 설정한 뒤 처리해주면 된다.

 

하지만 이 방법은 문제가 하나 있다.

하위 컴포넌트에서 처리하는 경우 상위 컴포넌트에서 날짜 데이터가 내려오기 전이라면 오류가 발생한다.

 

예를들어 게시글 작성일을 처리한다고 하자.

그럼 상위 컴포넌트에서 useEffect를 통해 게시글 정보 조회 요청을 보내고 일단 렌더링이 수행되게 될 것이다.

그럼 하위 컴포넌트에서는 전달받은 data.createdAt 이런 날짜 데이터를 통해 객체를 만들어야 한다.

new Date(data.createdAt) 이런 식으로 만들게 될텐데 저 값이 존재하지 않기 때문에 오류가 발생하게 된다.

오류가 발생하더라도 렌더링 후 useEffect가 수행되어 재 렌더링 되면서 하위 컴포넌트로 정상적인 데이터를 넘기더라도 재 렌더링은 일어나지 않는다.

 

그래서 이 방법을 통해 날짜를 포맷팅 하고자 한다면 Date 객체 생성에 있어서 undefined가 들어오지 않고 무조건 존재하는 값이 들어오는 경우에만 사용할 수 있을 것이라고 생각한다.

 

 

dayjs

위 방법에서 발생한 문제로 인해 고민하다 결국에는 라이브러리를 사용하기로 했다.

여러 라이브러리가 있었지만 사용하기로 한 라이브러리는 dayjs다.

 

dayjs는 설치한 뒤에 사용할 수 있다.

npm install dayjs

 

그리고 index.js 에 기본 설정을 해줘야 한다고 한다.

//index.js

//...

import dayjs from 'dayjs';
import 'dayjs/locale/ko'; // 한국어 가져오기

//윤년을 판단하는 플러그인
import isLeapYear from 'dayjs/plugin/isLeapYear';
//0분전, 1달전, 1년전 이렇게 상대 시간을 표현하는 플러그인
import relativeTime from 'dayjs/plugin/relativeTime'


dayjs.extend(isLeapYear, relativeTime); // 플러그인 등록
dayjs.locale('ko'); // 언어 등록

//...

 

플러그인은 필요에 따라 사용하면 될 것 같다.

현재 프로젝트에도 몇분전 이런건 하지 않아서 isLeapYear만 처리했다.

 

relativeTime에 대한 것은 아래 문서에서 확인할 수 있다.

https://day.js.org/docs/en/plugin/relative-time

Day.js · 2kB JavaScript date utility library

 

 

사용은 아주 간단하다.

<span>
    {dayjs(board.boardDate).format('YYYY-MM-DD')}
</span>

컴포넌트에서 이렇게 처리하는 것으로 2024-04-14 이렇게 포맷팅 할 수 있다.

 

format으로는 YY-MM-DD 나 YYYY/MM/DD, YYYY/MM/DD HH:mm:ss, hh:mm:ss 가 있다.

 

dayjs를 이용해 입력할 수 있는 날짜 타입으로는

string, number, Date, dayjs.Dayjs, null, undefined가 있다.

그렇게 때문에 이전 Intl.DateTimeFormat을 사용할때처럼 Date 객체를 만들어줄 필요도 없고 null이나 undefined가 들어간다고 해서 오류가 발생하지도 않는다.

그래서 여러 조건에 대해 따로 처리하지 않고 맡겨둘 수 있어서 좋다.

 

dayjs 참고 블로그

https://jforj.tistory.com/267

[React] Dayjs로 간편하게 날짜 처리하기