[firebase] firestore⑤ : UPDATE 요청
드디어!! 마지막 시간인가!! UPDATE 요청하기!!
이미 Firestore에 있는 데이터를 수정하도록 기능 구현을 해볼 것이다.
다른 데이터들은 모조리 삭제를 하고, 아침 메뉴, 점심 메뉴, 저녁 메뉴만 남겨 놓았다. 저 때는 빈츠/커피, 야채곱창, 샌드위치를 먹었군 ㅋㅋ 오늘의 메뉴는 달라졌기 때문에 이를 반영하여 수정 사항을 적용해보자.
우선 각 데이터마다 수정 버튼을 달아주었고, 삭제버튼도 원래 X 표시만 있었는데, 구분이 쉽도록 '삭제'라는 단어로 바꿔주었다.
일단 handleUpdateMemo라는 함수를 만들기 전에 수정이 잘 되는지 간단하게 확인차 UpdateBtn이라는 styled component인 수정버튼의 onClick에 직접 코드를 작성해보았다.
<UpdateBtn
onClick={() => {
const updateData = {
[memo.id]: newMemo,
};
updateDoc(memo.docRef, updateData);
handleGetMemo();
setNewMemo("");
}}
>
수정
</UpdateBtn>textarea에 제육볶음이라는 단어를 적고 야채곱창 옆의 수정 버튼을 클릭하면
쫘자잔! 야채곱창이 제육볶음으로 바뀌었다!!!!
쏴리질러~!~!
Firestore에도 저녁메뉴가 제육볶음으로 잘 바뀌어 있다.
그런데 좀 이상한 점이 있다.
가끔 firestore에는 변경사항이 반영이 되는데
화면 상에서는 변경 사항이 적용이 안될 때가 있는 것이다.
저녁 메뉴를 피자로 바꿔보았는데 Firestore 상에서는 변경사항이 잘 적용이 되었지만,
화면 상에는 계속 닭칼국수인 채로 남아있는 것이다.
(심지어 가끔도 아니고 꽤 자주 발생한다.)
이게 왜 그런지 봤더니 Firestore가 비동기적으로 동작하기 때문에 위의 코드처럼 비동기를 무시하고 동기적으로 코드를 작성했다가는 순서를 제어할 수 없기 때문이다. handleGetMemo 함수가 updateDoc(memo.docRef, updateData)보다 먼저 실행이 될 수도 있는 것이다. 만약 이러한 경우라면, handleGetMemo는 update되기 전의 데이터를 Firestore에서 가져와서 보여주기 때문에 화면 상의 데이터와 일치하지 않을 가능성이 있는 것이다.
따라서 순서를 제어하기 위해서는 promise나 async/await를 사용해야하는 것이다. 지금까지는 단순히 "순서를 제어하기 위해서는 async/await를 써야지 암"이라고 생각만 하면서 사용했는데, 비동기적으로 코드를 작성하지 않으니 순서가 제어되지 않아 의도되지 않은 결과가 나타나니 더욱 더 와닿는다. 아주 만족스러운 공부였다아!!!
그럼 이제 비동기적으로 고쳐보자. handleUpdateMemo 함수로 코드를 옮겨보자 영차!!
닭칼국수를 고기만두로 바꿔본다!! 두근두근 하나둘셋
역쉬 ~ 잘바뀐다. Firestore에도 당근 잘 반영이 되어 있다.
async/await로 코드 순서를 제어하니 화면과 Firestore에 있는 데이터의 불일치도 더 이상 발생하지 않는다.
const handleUpdateMemo = async (memo: IMemo) => {
const updateData = {
[memo.id]: newMemo,
};
await updateDoc(memo.docRef, updateData);
await handleGetMemo();
setNewMemo("");
};야호~~~ 이제 firebase 프로젝트에서 목표했던 기능 구현은 다 끝났다. 뭔가 시원섭섭한 걸 ㅎㅎㅎㅎ 첫 프로젝트여서 그런지 아주 많이 성장했다. 특히 Firestore로 CRUD 구현할 때는 나름 타입스크립트 공부했다고 타입도 적절하게 주었던 것도 보람차다!!
이제 앞으로 나만의 토이 프로젝트들을 할 때에도 이번 프로젝트에서 구현했던 기능들을 계속 사용할 것이다. 틈틈이 메모장 프로젝트도 리팩토링하면서 보기 좋게 바꿔보자. 씨유쑨!! 파이어베이스 짱짱!!
