이 내용은 노마드코더 니코샘 강의를 기반으로 공부한것입니다.
const [editing, setEditing] = useState(false);
const [newNweet, setNewNweet] = useState(nweetObj.text);
const NweetTextRef = doc(dbService, "nweets", `${nweetObj.id}`);
const urlRef = ref(storageService,nweetObj.attachmentURL) // attachmenturl받는법
const onDeleteClick = async () => {
const Ok = window.confirm("삭제하시겠습니까???");
console.log(Ok);
if (Ok) {
await deleteDoc(NweetTextRef);
await deleteObject(urlRef)
}
};
const toggleEditing = () => setEditing((prev) => !prev);
const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
await updateDoc(doc(dbService,`nweets/${nweetObj.id}`),{nweet:newNweet})
setEditing(false)
};
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const {
currentTarget: { value },
} = event;
setNewNweet(value);
};
toggleEditing 함수를 통해서 수정을 누르면,
취소라는 버튼을 통해서 원래 상태로 돌아가는 기능을 하게 한다.
update
updateDoc 이라는 메서드를 이용해서 Nweet를 Update(수정)하게끔 한다.
dbService를 이용해야하니, 불러오고 nweetObj.id에 해당하는 nweet를 수정한다.
그 값은 newNweet가 들어가고 에디팅이 끝나야하므로 false로 하여금 다시 돌아가게끔 코드를 만들었다.
delete
ref변수를 NweetText, AttachmentUrl을 받아오게 지정하고
deleteDoc메서드를 이용하여
삭제하고 싶은 Nweet이 있다면 지정된 nweetObj.id에 맞는 nweet을 삭제한다.
https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ko
이곳을 통해서 좀더 자세한 부분을 공부할 수 있습니다.
하면서 좀 어려웠던 점 좋았던 점 ??
version9이 되면서 전체적으로 코드가 단순해지고 쉬워진 점이 너무 편했다는 점은 좋다. 어려운건 처음이라서
좀 전체적인건 이해했지만 완벽하게 이해하지는 못했다라고 느껴졌다는 점.. 처음엔 따라치느라 좀 힘들었지만, 공부라는게 왕도가 없듯이 우선 반복이 답인거 같다.
양쓰