TypeScript 시간 몇 시간 전, 날짜 표시하는 방법

 

 

 

오늘은 날짜를 표시하기 위한 작업을 했다.

 

 

 

1. 하루 전 데이터일 경우엔 

 

 

ex) 3시간 전 

 

 

이렇게 표시하기

 

 

2. 하루 이상 된 데이터일 경우엔

 

 

ex) 03.05 

 

 

이런 식으로 표현하고 싶었다.

 

 

import { format, isToday, differenceInHours } from 'date-fns';

export const formatCreatedAt = (createdAt: string) => {
  const date = new Date(createdAt);
  if (isToday(date)) {
    const hoursDifference = differenceInHours(new Date(), date);
    return `${hoursDifference}시간 전`;
  } else {
    return format(date, `MM.dd`);
  }
};

 

 

작성 코드는 간단하다.

 

 

1️⃣ 재사용 가능하도록  컴포넌트 분리

 

 

 

 

프로젝트에서 대부분 날짜 양식이 비슷하게 쓰이고 있어서, 하나로 통일하고자 ts 파일로 만들었다.

 

 

2. createdAt props로 받기

 

 

위에 정리해둔 것처럼 재사용 컴포넌트를 만들고

 

 

 

 

사용할 곳에 

 

 

<Text>{formatCreatedAt(data.newsDetailByID.createdAt)}</Text>

 

 

이런 식으로 코드를 작성해주면 바로 사용할 수 있다!