데이터 삭제하기

DELETE

• 배열에 id 가 일치 하지 않은 배열로만 구성

App.js

  const onDelete = (targetId) => {
    const newDiaryList = data.filter((it) => it.id !== targetId);
    setData(newDiaryList);
  };

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate} />
      <DiaryList diaryList={data} onDelete={onDelete} />
    </div>
  );

DiaryItem.js

      <div className="content">{content}</div>
      <button
        onClick={() => {
          if (window.confirm(`${id + 1} 번째 일기를 삭제하겠습니까?`)) {
            onDelete(id);
          }
        }}
      >
        삭제하기
      </button>
    </div>

---

수정하기

UPDATE

DiaryItem.js

import { useRef, useState } from "react";

const DiaryItem = ({
  onDelete,
  onEdit,
  id,
  author,
  content,
  emotion,
  created_date,
}) => {
  const localContentInput = useRef();
  const [localContent, setLocalContent] = useState(content);
  const [isEdit, setIsEdit] = useState(false);
  const toggleIsEdit = () => setIsEdit(!isEdit);

  const handleClickRemove = () => {
    if (window.confirm(`${id} 번째 일기를 삭제하겠습니까?`)) {
      onDelete(id);
    }
  };
  const handleQuitEdit = () => {
    setIsEdit(false);
    setLocalContent(content);
  };

  const handleEdit = () => {
    if (localContent.length < 5) {
      //다시 검증
      localContentInput.current.focus();
      return;
    }
    if (window.confirm(`${id}번 째 일기를 수정하시겠습니까?`)) {
      onEdit(id, localContent);
      toggleIsEdit();
    }
  };

  return (
    <div className="DiaryItem">
      <div className="info">
        <span className="author_info">
          |작성자: {author} | 감정점수 : {emotion}|
        </span>
        <br />
        <span className="date"> {new Date(created_date).toLocaleString()}</span>
      </div>
      <div className="content">
        {isEdit ? (
          <textarea
            ref={localContentInput}
            value={localContent}
            onChange={(e) => setLocalContent(e.target.value)} //원래 있던 값으로
          />
        ) : (
          content
        )}
      </div>

      {isEdit ? (
        <>
          <button onClick={handleQuitEdit}>수정취소 </button>
          <button onClick={handleEdit}>수정 완료 </button>
        </>
      ) : (
        <>
          <button onClick={handleClickRemove}>삭제하기</button>
          <button onClick={toggleIsEdit}>수정하기</button>
        </>
      )}
    </div>
  );
};

export default DiaryItem;

• 일기의 본문을 수정해줄 수 있는 폼이 있어야해 (state) 필요

• isEditState 가 수정중이라면 True 값을 갖게
  => true 면 수정폼을 제시

수정중이라면(True)

• 수정폼을 제시
• 수정취소/완료 버튼 만들기
• 수정하면, 기존 데이터 유지하고 수정하도록. useState(content)로 기본값을.
• 수정취소를 누르면 내가 기존에 작성한 수정을 취소하고 진짜 원본 값을 갖게. handleQuitEdit
• 수정완료를 할때도 useRef()로 길이, 포커스 검사.

App.js

  const onEdit = (targetId, newContent) => {
    setData(
      data.map(
        (it) => (it.id === targetId ? { ...it, content: newContent } : it) //타겟 id 면 바꾸고, 아니면 기존 사용
      )
    );
  };

• 수정사항은 App 컴포넌트까지 위로 보내줘야해. onEdit 으로.
• App.js 에서는 onEdit으로 받은 데이터를 setData.