firebase react setup 및 firestore 데이터 가져오기

설치

npm install --save firebase

firebase 클래스 선언

파이어베이스 클래스를 선언한다. 파이어베이스에 받은 정보들을 config에 넣는다.

import * as firebase from "firebase/app";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

firebase.initializeApp(firebaseConfig);
export default firebase;

---

활용하기

db에서 데이터를 가져온다.

import firebase from 'Firebase'

const db = firebase.firestore();
      var users = db.collection("users");
      users.get()
      .then( query => {
        // var array = query.map(a => a.data());
        // console.log(array);
        var array = []
        query.forEach(function(doc) {
          array.push(doc.data());
        });
        this.setUsers(array);
      })

---

참고

• https://firebase.google.com/docs/web/setup?authuser=0
• https://medium.com/get-it-working/get-googles-firestore-working-with-react-c78f198d2364
• https://firebase.google.com/docs/firestore/query-data/get-data