리액트 숙련 - [과제] 아티스트 컬렉션 만들기 (4)

이동하기..

아무리 찾아봐도 Navigate는 안되었다..^^..
계속 Id를 못찾았다.
재상 튜터님께 가니까 이동이 안된다고 말씀드렸는데.
이동은 멀쩡히 되고 있었고 그안에서 제대로 렌더링이 안되고 있었다.
세상에나... 기존에 더미데이터 읽어오는건 잘 되었고, 새로 등록하는거만 안되어서 알고보니 state로 데이터를 추가하는건 맞지만 실제로 더미데이터를 담아둔 Data.js에는 전혀 새로운 데이터가 담겨있지 않았다.

그래서 새로 등록하는 인풋폼에 push로 넣었다.

 if (inputValid(nickname, content)) {
      const now = new Date();
      const newLetters = {
        createdAt: String(now),
        nickname: nickname,
        avatar: require("../assets/default.svg").default,
        content: content,
        writedTo: member,
        id: uuid(),
      };
      setLetters([...letters, newLetters]);
      data.push(newLetters); // << 여기 
      setNickname("");
      setContent("");
      setMember("");
    } else {
      alert("이름과 내용은 필수 입력값입니다.");
    }
  };

와. 이렇게 쉽게 할수 있는거라니.. 놀랍다.

ClassName 을 안쓰는게 좋음

클래스 네임은 안쓰는게 좋다고 하셨다.
수천줄이 되면 거기서 찾는것도 어려울거고 차라리 styled.components로 명시하는게 좋다고 하셨다. (더 좋게 말씀하셨는데 글로 표현하기가 어렵다..)

Detail 페이지 CSS

Detail 페이지를 CSS로 꾸며주었다.
최종 고민한 디자인은 이것..
역시 CSS는 금방끝나서 좋다.....

삭제기능

와.. 단순한 삭제기능인줄알았는뎈ㅋㅋㅋ
확인도 필요하고 없으면 없다고 해야하네.. 하 ㅠㅠㅠ

와,,, 작동을 안하다니

 const deleteBtn = () => {
    // 선택된 아이템을 제외한 새로운 배열 생성
    const newLetters = letters?.filter((item) => item.id != foundData.id);
    // 상태 업데이트
    setLetters(newLetters);
    // 메인 페이지로 가기
    navigate("/");
  };

와 정말 오늘 열심히했는데 TIL에 자랑할만한게 없네..ㅠㅠㅠㅠㅠㅠ