사진 처럼 시간 표현을 많이 사용한다 dayjs로 쉽게 구현할 수 있다.
dayjs는 Moment.js와 비슷한 기능을 제공하지만 더 가볍고 성능이 우수하며 모던한 문법을 사용합니다.
패키지 설치
yarn add dayjs
npm install dayjs
import days from 'dayjs';
import 'dayjs/locale/ko'; // 한국어 불로 오기
import relativeTime from 'dayjs/plugin/relativeTime.js';
export default function Comment(prop) {
const { comment, createdAt, commentDeleta, commentId, commentEdit } = prop;
const storedUserId = localStorage.getItem('userId');
const [isEditing, setIsEditing] = useState(false);
const [editedComment, setEditedComment] = useState(comment);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const toggleEdit = () => {
setIsEditing(!isEditing);
};
const handleCommentEdit = async () => {
await commentEdit(commentId, editedComment);
setIsEditing(false);
};
const handleKeyPress = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleCommentEdit();
}
};
days.extend(relativeTime).locale('ko');
const commentTime = days(createdAt).fromNow(); //prop에서 넘어 온 createdAt 시간 2023-09-13T14:11:09.000Z
이제 commentTime 변수를 필요한 부분에 넣으시면 끝.