[TIL] 8/12

일기 수정 함수

const editDiary = (id) => {
    const diaryToEdit = diaries.find(diary => diary.id === id);
    setTitle(diaryToEdit.title);
    setContent(diaryToEdit.content);
    // 수정 후 제출 시 기존 일기 삭제 후 새로운 일기로 교체
    deleteDiary(id);
  };

일기 삭제 함수

const deleteDiary = (id) => {
    const updatedDiaries = diaries.filter(diary => diary.id !== id);
    setDiaries(updatedDiaries);
    localStorage.setItem('diaries', JSON.stringify(updatedDiaries));
  };

변경 전 : submitBtn 함수가 동작되면

// form이 submit 될때 
  const submitBtn = function(e){
    e.preventDefault();
    if(!title || !content){
      alert("제목과 내용을 모두 입력해주세요.");
      return;
    }

    // 저장하기위해 새로운 객체 생성
    const newDiary = {
      id : Date.now(),
      title : title,
      content: content,
      data: TodayDate
    };

    // 새로운 다이어리 만들기
    const updatedDiaries = [...diaries, newDiary];
    setDiaries(updatedDiaries);

    // 로컬에 새로운 다이어리 저장
    localStorage.setItem('diaries', JSON.stringify(updatedDiaries));

    // 저장 후 제목과 내용을 비우기
    setTitle('');
    setContent('');
  }

변경 후 1: 작성과 수정 함수를 같이 작성

 // form이 submit 될 때
  const submitBtn = function (e) {
    e.preventDefault();
    if (!title || !content) {
      alert("제목과 내용을 모두 입력해주세요.");
      return;
    }

    if (editId) {
      // 수정 중인 경우
      const updatedDiaries = diaries.map(diary => 
        diary.id === editId ? { ...diary, title, content } : diary
      );
      setDiaries(updatedDiaries);
      localStorage.setItem('diaries', JSON.stringify(updatedDiaries));
      setEditId(null);  // 수정 완료 후 상태 초기화
    } else {
      // 새로운 다이어리 만들기
      const newDiary = {
        id: Date.now(),
        title: title,
        content: content,
        data: TodayDate
      };

      const updatedDiaries = [...diaries, newDiary];
      setDiaries(updatedDiaries);
      localStorage.setItem('diaries', JSON.stringify(updatedDiaries));
    }

    // 저장 후 제목과 내용을 비우기
    setTitle('');
    setContent('');
  }

  // 일기 수정 함수
  const editDiary = (id) => {
    const diaryToEdit = diaries.find(diary => diary.id === id);
    setTitle(diaryToEdit.title);
    setContent(diaryToEdit.content);
    setEditId(id);  // 수정 중인 일기의 ID를 상태에 저장
  };

  // 일기 삭제 함수
  const deleteDiary = (id) => {
    const updatedDiaries = diaries.filter(diary => diary.id !== id);
    setDiaries(updatedDiaries);
    localStorage.setItem('diaries', JSON.stringify(updatedDiaries));
  };

---

변경 후 2: 작성과 수정 함수을 별도로 따로 작성

// 일기 작성 함수 (submit)
const submitBtn = function (e) {
  e.preventDefault();

  if (!title || !content) {
    alert("제목과 내용을 모두 입력해주세요.");
    return;
  }

  const newDiary = {
    id: Date.now(),
    title: title,
    content: content,
    data: TodayDate
  };

  const updatedDiaries = [...diaries, newDiary];
  setDiaries(updatedDiaries);
  localStorage.setItem('diaries', JSON.stringify(updatedDiaries));

  setTitle('');
  setContent('');
};

// 일기 수정 함수 (update)
const updateDiary = function () {
  if (editId) {
    const updatedDiaries = diaries.map(diary => 
      diary.id === editId ? { ...diary, title, content } : diary
    );
    setDiaries(updatedDiaries);
    localStorage.setItem('diaries', JSON.stringify(updatedDiaries));
    setEditId(null);  // 수정 완료 후 상태 초기화
    setTitle('');
    setContent('');
  }
};