[Firebase 04] firestore에 저장된 데이터 가져와 읽어보자! ✨

Olivia·2023년 4월 19일

Firebase firebase db firestore react firebase 파이어베이스 파이어스토어

[Firebase]

목록 보기

4/5

지난번 포스팅에서는 DB를 넣어봤다면 그걸 가져와서 읽어보도록 하겠다!
코딩애플님 강의를 듣고 있다.
코딩애플님 강의에서는 Vanilla JS와 jQuery를 사용하는 반면, 나는 React로 하다보니 거의 내 마음대로 개발하니 참고만 할 것..!

Firestore DB를 실시간으로 가져오는 방법

firestore.collection("이름")에는 onSnapshot 메서드로 실시간 정보를 가져올 수 있다.

onSnapshot()란?

DB에 변화 or 행위가 생길 때 알림을 받을 수 있는 리스너(listener)다.
사용자가 제공하는 콜백이 최초로 호출될 때, 현재 콘텐츠로 snapshot이 생성된다.
이후 콘텐츠가 변경될 때마다 콜백이 호출되어 snapshot을 업데이트한다.

✍️ 코드 (version 8기준)

useEffect(()=>{
	db.collection('이름').onSnapshot(snapshot => {
    	const arrayname = snapshot.docs.map(doc=> ({
        	id: doc.id,
            ...doc.data()
    	}));
	})
 }. []);

docs

docs로만 호출하면 아래처럼 뭐가 나오긴하는데, 알아보기 힘들다..

그래서 여기다가data()를 입력하면 우리가 저장한 데이터들이 읽기 쉽도록 출력된다.

orderBy()로 정렬 순서 지정

이렇게하면 모든 문서를 id에 따라 오름차순으로 불러와준다.
만약, 여기서 데이터 정렬 순서를 지정해서 불러오고 싶다면 orderBy를 추가하면 된다.

✍️ 코드 (version 8기준)

useEffect(()=>{
	db.collection('이름').orderBy("이름").onSnapshot(snapshot => {
    	const arrayname = snapshot.docs.map(doc=> ({
        	id: doc.id,
            ...doc.data()
    	}));
	})
 }. []);

Green-market에 적용해보기

1. 먼저 2가지 폴더를 생성했다.

[Products] : 개별 상품 리스트가 담길 큰 덩어리
[Product] : 개별 상품 리스트 작은 덩어리

2. Products 작성

useEffect로 데이터를 불러온다.

✍️ 내가 작성한 코드 (version 8기준)

import * as $ from "./styles";
import { db } from "../../index";
import { useEffect, useState } from "react";
import Product from "../Product";

const Products = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    db.collection("product")
      .orderBy("price", "desc")
      .onSnapshot((snapshot) => {
        const productsArray = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setProducts(productsArray);
      });
  }, []);

  return (
    <$.ProductSection>
      <$.ProductsInformation>
        {products.map(({ title, price }) => (
          <Product title={title} price={price} />
        ))}
      </$.ProductsInformation>
    </$.ProductSection>
  );
};

export default Products;

orderBy를 연습하기 위해서 가격별로 정렬했는데, 그냥 나중에 등록한 시간별로 저장하는 것이 좋을 것 같다.
$. 가 뭐야?
현재 css in JS로 styled-components를 사용하고 있다.
이게 많아지면 컴포넌트 이름이랑 구별하기가 너무 어려워서 styled-components를 사용할 때 $.를 작성해서 구별을 해주고 있다.
import에 보면 import * as $ from './styles'
이 부분이 모든 style들을 $로 표시한다는 의미다.

3. Product 작성

✍️ 내가 작성한 코드

import * as $ from "./styles";

const Product = (props) => {
  const { title, price } = props;
  return (
    <$.ProductSection>
      <$.ProductImageSection>
        <$.ProductThumnail
          src="https://via.placeholder.com/350"
          alt="logo image"
        />
      </$.ProductImageSection>
      <$.ProductsInformation>
        <p>{title}</p>
        <p>2030년 1월 8일</p>
        <p>{price} 원</p>
        <p>💚 0</p>
      </$.ProductsInformation>
    </$.ProductSection>
  );
};

export default Product;