[리액트 React] 팬카페 만들기_로컬스토리지로 게시물 등록, 삭제 구현

// 게시물 삭제
  const removeComment = (id) => {
    if (window.confirm("게시물을 삭제하시겠습니까?")) {
      alert(`${selectedComment.writedTo}에게 작성된 게시물이 삭제되었습니다.`);
      const deleteComment = comments.filter((item) => item.id !== id);
      localStorage.setItem("comments", JSON.stringify(deleteComment));
      setComments(deleteComment);

      return closeModal();
    }
    alert("삭제를 취소했습니다.");
    return;
  };​

// 게시물 추가
  const addComments = (e) => {
    e.preventDefault();
    const newComments = {
      id: uuid(),
      nickName,
      profileImg: user,
      content,
      writedTo: selectedRecipient,
      regDate: (() => {
        const now = new Date();
        const today = `${now.getFullYear()}년
        ${now.getMonth() + 1}월
        ${now.getDate()}일
        (${now.getHours()}시
        ${now.getMinutes()}분)`;
        return today;
      })(),
    };

    if (!nickName) {
      alert("닉네임을 입력해 주세요");
      return nickNameEl.current.focus();
    } else if (!content) {
      alert("내용을 입력해 주세요");
      return contentEl.current.focus();
    } else if (!selectedRecipient) {
      alert("수신자를 선택해 주세요");
      return selectedEl.current.focus();
    }
    alert(`${selectedRecipient}에게 게시글이 등록되었습니다`);

    localStorage.setItem(
      "comments",
      JSON.stringify([...comments, newComments])
    );
    setComments([...comments, newComments]);

    setNickName("");
    setContent("");
    setSelectedRecipient("");
    return;
  };

 

팬카페 만들기 2일차

게시물 등록, 삭제 구현 완료, 로컬스토리지를 이용해 등록했다

게시물 등록을 위해 새 객체를 만들고 새로운 객체를 넣은 게시물을 만들기 위해 state를 변경하기 전에, 로컬스토리지 setItem(키:값)으로 저장하면 새 로고침해도 브라우저 로컬스토리지에 저장되어 있다

삭제도 선택한 게시물의 id를 기준으로 필터를 이용하여 새로운 배열을 반환하고 로컬스토리지에 반환된 배열을 저장시킨 후 게시물 리스트 state를 변경해 주면 완성

등록, 삭제는 지난번 과제에도 해봤고 로컬스토리지도 영화 과제에서 사용해 봤지만 리액트 환경에서는 처음 써보는 거다 보니 오류를 몇 번 마주쳤다 어찌저찌 구현은 했지만 아직 많이 헷갈린다. 다시 한번 복습하도록 하자

 

내일 할 일

• 게시물 수정 기능 구현
• Router를 이용하여 각 멤버마다 등록된 메세지 나오게 할 것
• 메시지가 등록되지 않은 멤버페이지에는 메시지가 없다는 안내문구 띄우기