[React Native] date-fns로 날짜 포맷팅하기

게시물을 작성한 시간에 따라 '방금 전', '3분 전', '1시간 전', '3일 전' 이런 형식으로 날짜가 나타나도록 수정하는 방법!

이때 사용한 라이브러리는 date-fns 라이브러리! 

코드

function formatDate(date) {
    const d = new Date(date);
    const now = Date.now();
    const diff = (now -d.getTime()) / 1000;

    if(diff < 60 * 1) {
        return '방금 전';
    }
    if(diff < 60 * 60 * 24 * 3) {
        return formatDistanceToNow(d, {addSuffix: true, locale: ko});
    }
    return format(d, 'PPP EEE p', {locale: ko});
}

 

diff : 현재 시간과 파라미터로 받아온 시간의 차이를 초 단위로 계산한 값

now - d.getTime()의 단위를 밀리세컨드라서 계산하기 용이하도록 1000으로 미리 나눴음.

 

게시물 글이 작성된 시간이 1분 미만이면 '방금 전' 이라고 표시 되고 3일 이상이면 format을 사용해서 날짜랑 시간이 나오도록 설정했다.

format 함수에서 'PPP EEE p'라고 적은 이유는 PPP는 날짜, EEE는 요일, p는 시간을 나타내기 때문!

 

이렇게 다 적고서 날짜를 나타내도록 코드 수정함

<Text style={styles.date}>{formatDate(date)}</Text>

 

결과