더북(TheBook)

글이 작성된 시간이 1분 미만이라면 ‘방금 전’이라고 보여주고, 3일 미만이라면 formatDistanceToNow를 사용해 단어로(예: 1시간 전, 3일 전) 보여주고, 3일 이상이라면 format을 사용해 날짜와 시간이 나오도록 설정했습니다.

formatDistanceToNow에서 addSuffix는 포맷팅된 문자열 뒤에 ‘전’ 또는 ‘후’ 접미사를 붙이는 옵션이고, locale은 언어입니다. 언어는 date-fns/locale에서 불러올 수 있습니다. date-fns는 전 세계에서 사용하는 주요 언어를 대부분 지원합니다. 우리는 현재 한국어로 설정한 상태입니다. format도 마찬가지로 언어를 설정해줬습니다.

format 함수에서 'PPP EEE p'라고 작성했는데, 이건 무슨 의미일까요? PPP는 날짜, EEE는 요일, p는 시간을 나타냅니다. 자세한 정보는 문서에서 확인해보세요.

https://date-fns.org/v2.16.1/docs/format

함수를 모두 작성했으면 기존에 날짜를 보여주던 부분을 수정해주세요.

components/FeedListItem.js - 날짜 Text

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

이제 날짜에 따라 포맷팅이 잘 이루어지는지 확인해야겠지요? 로그를 작성하고 설정한 조건만큼 시간이 지날 때까지 기다릴 수는 없으니 LogContext의 기본값을 임의로 지정해봅시다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.