hw done

[jihochang03]

💎 과제 구현 설명

과제를 위해 사용했던 함수, 수정한 파일 등 구현 내용에 대한 간단한 설명을 작성해 주세요.

🏁 PR 체크리스트

• 코드가 오류 없이 정상적으로 실행되나요?
• 커밋 메시지 컨벤션(템플릿 활용)을 준수했나요?
• 과제 마감기한을 준수했나요?

🖼️ Screenshot / Video

🙌 Issue

과제 수행 중 어려웠던 부분이나 궁금했던 점을 자유롭게 작성해 주세요.

[rayark1]

props를 변수로 받아 구조분해 할당을 하지 않고, 바로 { comment, handleCommentDelete, handleCommentEdit } 으로 넣어도 괜찮습니다!

[rayark1]

const CommentElement = ({ comment, handleCommentDelete, handleCommentEdit })

[rayark1]

Date를 사용하서 직접 파싱하는 방법도 있지만, 파싱을 위한 라이브러리를 사용하는 것도 좋습니다.

import { format } from "date-fns";

const formatDate = (dateString) => format(new Date(dateString), "yyyy.MM.dd");

[rayark1]

위 방법이 아니더라도, 이렇게 전역변수를 많이 선언하는 것보다 함수로 분리하는 것이 좋아 보입니다!

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  // 한 자리 수인 경우 앞에 0을 붙여줍니다.
  month = month < 10 ? `0${month}` : month;
  day = day < 10 ? `0${day}` : day;

  return `${year}.${month}.${day}`;
};

[rayark1]

필요없는 코드는 제거하셔도 상관없습니다!

[rayark1]

onclick 함수가 길어진다면 따로 분리를 고려해보세요!

const toggleEdit = () => {
    setIsEdit(!isEdit);
    if (isEdit) {
      setContent(comment.content); // 수정 취소 시 원래 내용으로 복원
    }
  };

[rayark1]

어떤 문제가 있을까요❓

[rayark1]

틀린 방법은 아닙니다만...! 아래 방법을 리액트에서는 더 선호합니다. 데이터의 직접 변경은 종종 예상치 못한 부작용을 일으킬 수 있습니다. 예를 들어, 객체나 배열을 여러 컴포넌트에서 참조하고 있을 때, 한 곳에서 객체를 직접 변경하면 다른 모든 참조에서도 그 변경 사항이 반영됩니다. 이는 예상치 못한 버그를 유발할 수 있습니다. 불변성을 유지하면 이러한 문제를 방지할 수 있습니다.

const updatedComments = commentList.map((comment) => {
    if (comment.id === commentId) {
      // 불변성을 유지하며 수정된 새 객체 생성
      return { ...comment, content: editedContent };
    }
    return comment;
  });
  setCommentList(updatedComments);