date-fns로 날짜 포맷팅하기

date-fns 라이브러리란?

보통 앱에서 날짜 형식을 보여줄때 다음과 같은 형식으로 시간이 출력되는 것을 본 적이 있을 것이다.

• 방금 전
• 3분 전
• 1시간 전
• 3일 전
• 2022년 2월 16일 07:00

이런 형식으로 시간을 출력할때 유용하게 사용하는 라이브러리가 date-fns다.

아래 링크에서 더욱 다양한 기능을 확인할 수 있다.

Modern JavaScript Date Utility Library

 

date-fns 라이브러리 설치 및 사용

아래 명령어를 사용해 라이브러리를 설치한다.

$ yarn add date-fns

...

import { format, formatDistanceToNow } from "date-fns";
import {ko} from "date-fns/locale";

function foramtDate(date) {
  const d = new Date(date);
  const now = Date.now();
  const diff = (now - d.getTime()) / 1000; // 현재 시간과의 차이(초)
  if (diff < 60 * 1) { // 1분 미만일땐 방금 전 표기
    return "방금 전";
  }
  if (diff < 60 * 60 * 24 * 3) { // 3일 미만일땐 시간차이 출력(몇시간 전, 몇일 전)
  return formatDistanceToNow(d, {addSuffix: true, locale: ko});
  }
  return format(d, 'PPP EEE p', {locale: ko}); // 날짜 포맷
}

function DateFnsExample() {
  return (
     ...
     <Text>{formatDate(date)}</Text>
     ...
  );
}

...

• formatDistanceToNow : 현재 시각을 기준으로 단어를 사용해 시간을 나타낸다.(예: 5분 전)
• format : 다양한 형태로 날짜를 포맷팅한다.

formatDistanceToNow에서 addSuffix는 문자열 뒤에 '전' 또는 '후' 접미사를 붙이는 옵션이고, locale은 언어다. 언어는 date-fns/locale에서 불러올 수 있다. 

 

format 함수에서 'PPP EEE p'라고 작성했는데 PPP는 날짜, EEE는 요일, p는 시간을 나타낸다.

자세한 정보는 아래 문서에서 확인할 수 있다.

Modern JavaScript Date Utility Library