지난 시간에는 DB에서 가져온 데이터를 console에 츨력해보았다.

이번 시간에는 나의 메모 보기 버튼을 클릭하면 나의 메모 보기 버튼 밑에 데이터의 리스트를 보여줄 것이다.

나의 메모 보기를 클릭하면 지난 시간에는 console에만 출력되었지만,
이번에는

짜잔!! 값들을 보여준다.

getDocs로 DB에 있는 데이터 가져오는 소스코드

import { useState } from "react";
import styled from "styled-components";
import { collection, getDocs, doc } from "firebase/firestore";
import { db } from "./service/firebase";

// styled-component 생략

interface IMemo {
  id: string;
  value: string;
}

function Memo() {
  const [memos, setMemos] = useState<IMemo[]>([]);
  
  // 나의 메모 보기 버튼의 onClick에 연결해 줄 함수
  const handleGetMemo = async () => {
    let querySnapshot = await getDocs(collection(db, "learn_firebase"));
    const memoList: IMemo[] = [];
    querySnapshot.docs.forEach((doc) => {
      for (let key in doc.data()) {
        memoList.push({ id: key, value: doc.data()[key] });
      }
    });
    setMemos(memoList);
  };
  return (
    <MemoContainer>
      <Title>메모장</Title>
      <MemoTextarea></MemoTextarea>
      <BtnContainer>
        <Btn>save</Btn>
        <Btn>delete</Btn>
      </BtnContainer>
      
      // handleGetMemo 연결
      <MemoListBtn onClick={handleGetMemo}>나의 메모 보기</MemoListBtn>
      <ul>
      // map을 이용하여 memo들을 촤라락 뿌려주자
        {memos.map((memo) => {
          return <li key={memo.id}>{memo.value}</li>;
        })}
      </ul>
    </MemoContainer>
  );
}
export default Memo;

getDocs는 Firestore SDK에서 제공하는 함수이다. learn_firebase collection에 있는 모든 문서를 가져올 수 있다. 여기서 가져온 데이터를 querySnapshot이라는 변수에 저장하고, forEach를 사용하여 querySnapshot의 원소들을 memoList라고 선언한 빈 배열에 push해주었다. 그리고 memos라는 state을 memoList로 변환해준다. 마지막으로 ul tag 내부에서 map을 이용하여 각 원소인 memo의 value를 보여준다.

그리고 타입!!! 이번 달 타입스크립트 본격적으로 공부 시작한 쟤스민~~ 아주 뿌듯해~~ FireStore 이용하여 CRUD를 구현할 때에는 각성하고 타입스크립트 공부 시작한 만큼 타입을 최대한 명시할 것이다. memoList에 push해주는 원소는 객체로 이루어져있으므로, IMemo라는 interface를 정의하여 IMemo[] type으로 명시해주었다.

이번에 GET요청하여 화면에 뿌려주기까지 성공했으니, 다음 시간에는 새로운 데이터를 textarea에 입력하면 DB에 저장할 수 있도록 POST 요청을 해보자.