reacには非常に重要な部分が啓発された.純粋なJavaScriptとの最大の違いは、自動的にレンダリングできることです.
したがって、再読み込み時には、元の配列に直接貼り付けるのではなく、コピーされた配列にコンテンツを追加するだけです.
そのうちの1つは구조분해할당(...변수)です

構造分解の割り当て

mdnでいう意味は
構造分解割り当て構文はJavaScript式で、配列またはオブジェクトの属性を分解し、その値を各変数に含めることができます.
困難簡単に言えば、新しいレプリカを作成し、すべてのレプリカを分解して使用したり、アレイではなくレプリカ全体を再コピーしたりすることができます.
次のコードで使用する例は、次のとおりです.
const newCommentData = [
...commentsList,
{
id: Math.floor(Math.random() * 100),
userId: 'jonghyeok',
text: newComment,
isLiked: false,
createdAt:「16分前」
},
];
setCommentsList(newCommentData);
setNewComment('');
};

const handleDelete = id => {
const index = commentsList.findIndex(value => value.id === id);
const deleteCommentList = [
  ...commentsList.slice(0, index),
  ...commentsList.slice(index + 1),
];
setCommentsList(deleteCommentList);

};
const handleLike = id => {
const index = commentsList.findIndex(value => value.id === id);
const isLikedCommentList = [...commentsList];
if (isLikedCommentList[index].isLiked === true) {
isLikedCommentList[index].isLiked = false;
} else {
isLikedCommentList[index].isLiked = true;
}
setCommentsList(isLikedCommentList);
};

findIndex()

与えられた判別関数を満たす配列の最初の要素のインデックスを返します.満足できる要素がない場合は、-1を返します.
コメントを追加したり、削除したり、ボタンを賛成したりする方法.
すなわち,新しい配列を作成し,反応中に自動的に現れることを可能にする.pushspliceは自動レンダリングできません.1つのコメントブロックは、テキストではなく、複数の要素を持つ配列内のオブジェクトで構成されます.つまり、削除したいコメントのみを削除するためには、削除したい配列のオブジェクト、すなわちインデックスにアクセスする必要があります.このため、1つのコメントを追加するたびに、고유한IDのコメントが提供されます.このため、このIDをクリックイベントが発生したIDと比較して、同じIDを持っている場合のみ削除できるようにすることができる.作成したコードを表示します.
const handleDelete = id => {
const index = commentsList.findIndex(value => value.id === id);
const deleteCommentList = [
...commentsList.slice(0, index),
...commentsList.slice(index + 1),
];
setCommentsList(deleteCommentList);
};
削除しようとするコメントにクリックイベントが発生した場合、削除ボタンがクリックされた고유한idと削除されたコメント고유한idとが同時に削除イベントが発生する.ここで重要な部分は、私が望んでいるインデックスだけが削除されます.私が欲しいインデックスを削除するために、削除するインデックスを見つけて、前のインデックスと後ろのインデックス구조분해할당を前後のインデックスに結合して、新しい配列を形成します!

const newCommentData = [
      ...commentsList,
      {
        id: Math.floor(Math.random() * 100),
        userId: 'jonghyeok',
        text: newComment,
        isLiked: false,
        createdAt: '16분전',
      },
    ];
    setCommentsList(newCommentData);
    setNewComment('');
  };

  const handleCommentEnter = e => {
    if (e.key === 'Enter') {
      addComment();
    }
  };

  const handleDelete = id => {
    const index = commentsList.findIndex(value => value.id === id);
    const deleteCommentList = [
      ...commentsList.slice(0, index),
      ...commentsList.slice(index + 1),
    ];
    setCommentsList(deleteCommentList);
  };

  const handleMainLike = () => {
    if (mainLike === true) {
      setMainLike(false);
    } else {
      setMainLike(true);
    }
  };

  const handleLike = id => {
    const index = commentsList.findIndex(value => value.id === id);
    const isLikedCommentList = [...commentsList];
    if (isLikedCommentList[index].isLiked === true) {
      isLikedCommentList[index].isLiked = false;
    } else {
      isLikedCommentList[index].isLiked = true;
    }
    setCommentsList(isLikedCommentList);
  };