React - Dayjs

Khusan·2023년 9월 13일
0
post-thumbnail

사진 처럼 시간 표현을 많이 사용한다 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 변수를 필요한 부분에 넣으시면 끝.

profile
부딪히면서 배워가는 코딩

0개의 댓글

관련 채용 정보