지난 시간에는 DB로 직접 가서 자체적으로 기입한 데이터 GET 요청을 해보았다. console에 출력도 해보고, 화면에 뿌려주기도 해보았다.

이번 시간에는 textarea에 사용자가 기입한 메모를 DB에 저장하는 POST 요청을 구현해보겠다. 지난 시간에 GET 요청을 할 때에는 getDoc 메서드를 사용했는데, 이번 시간에 POST 요청을 할 때에는 addDoc 메서드를 사용한다.

textarea에 '등갈비찜'이라고 입력하고 save 버튼을 누르고 firestore로 직접 가서 보면

이렇게 등갈비찜이라는 데이터도 추가가 되어있다!!
아이 씐나!! 씐나서 버블밀크티라는 단어도 추가해보았는데

물론 추가된다.

그런데.. 문제가 하나 있좌나..

나의 handleSaveMemo 함수 코드를 보면

.
.
.
  const [newMemo, setNewMemo] = useState("");
.
.
.
  const handleSaveMemo = async () => {
    if (newMemo === "") return;
    const docRef = await addDoc(collection(db, "learn_firebase"), {
      memo: newMemo,
    });
    console.log(docRef.id);
    setNewMemo("");
  };
  .
  .
  .

learn_firebase 컬렉션에 { memo: newMemo } 형태로 데이터를 보낸다. 그런데 이 때 newMemo라는 value에는 그 때 그 때 textarea에 기입한 text가 담기지만 memo라는 key는 고정된 text로 변화가 없다.
이러한 이유로 DB에 저장된 값들이 성공적으로 화면에 렌더링 되기는 하지만 same key를 가지고 있는 2개의 데이터가 있어서 Warning을 받았다.

문제: addDoc 메서드 사용 시 매번 memo라는 단어의 key를 사용했더니 key 중복 발생

Warning: Encountered two children with the same key, 'memo'.
Keys should be unique so that components maintain their identity across updates.
Non-unique keys may cause children to be duplicated and/or omitted 
- the behavior is unsupported and could change in a future version.

그렇다면 각 데이터의 key의 고유성을 보장하기 위해 어떤 방식을 활용하면 좋을까?

해결 : new Date()와 getTime()을 활용하여 각 데이터의 key 고유성 보장

나는 new Date()와 getTime()을 활용하여 매번 새로운 key가 생성이 되도록 하였다.

 const handleSaveMemo = async () => {
    if (newMemo === "") return;
    const now = new Date();
    const timeElapsed = now.getTime();
    const docRef = await addDoc(collection(db, "learn_firebase"), {
      [timeElapsed]: newMemo,
    });
    console.log(docRef.id);
    setNewMemo("");
  };

key를 timeElapsed로 바꿔주니 더 이상 Warning이 뜨지 않는다.

(등갈비찜과 버블밀크티를 삭제하고 치킨과 타코를 다시 넣어주었다.)

치킨의 key가 memo라는 글자가 아니라 [timeElapsed]가 되어 save하는 시점에 결정되므로 각 데이터의 고유성이 보장된다.

아이 재미난다 ㅎㅎㅎㅎㅎ
왜 이렇게 재미있지!!
다음 시간에는 DELETE 요청을 해보자!
씨유쑨~~!!!