React & Firebase 연동하기/데이터 가져오기

Firebase / Firestore 설정

• https://duckgugong.tistory.com/206

Firebase/Firestore 설정하기

• 위 링크에 들어가서 Firebase / Firestore를 설정한 후에 Firestore에 원하는 데이터를 추가하자.
• 나는 Firebase 프로젝트의 이름을 duckgugong-react, collection의 이름을 bucket, document의 이름을 bucket_item으로 만들고 field를 completed, text로 만들었다.

React에 Firebase 연동하기

• Firebase를 연동할 리액트 프로젝트를 열고 아래 명령어를 입력하자.

yarn add firebase

• config를 가져오기 위해 src 폴더 하위에 firebase.js 파일을 만들고 아래 코드를 붙여넣자.

firebase.js

//firebase.js
import firebase from "firebase/compat/app"
import 'firebase/compat/firestore';

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };

• Firebase 프로젝트를 열고 </> 모양의 웹 버튼을 클릭하자.

• 앱 닉네임을 적어주고 앱 등록 클릭.
• 앱 닉네임은 내 앱을 어떻게 부를지 정하는 것이다.

• 잠시 기다리면 Firebase SDK 추가영역에 텍스트가 나타난다.
• 아래 firebaseConfig의 내용을 위 firebase.js 파일의 firebaseConfig 변수에 복사 

• firebase.js 파일이 아래처럼 되도록 하면 된다.

firebase.js

//firebase.js
import firebase from "firebase/compat/app"
import 'firebase/compat/firestore';

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
    apiKey: "AIzaSyBB-NZ_Hd-Y8LCgdeJZdiUzqstqSU_6W78",
    authDomain: "duckgugong-react.firebaseapp.com",
    projectId: "duckgugong-react",
    storageBucket: "duckgugong-react.appspot.com",
    messagingSenderId: "455138718008",
    appId: "1:455138718008:web:0e234daddc7a1cf4ac91cd",
    measurementId: "G-3DSJ5X279T"
};

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
// 다른 곳에서 불러올때 firestore로 불러와야 함!!
export { firestore };

• App.js에서 firebase.js에서 내보낸 firestore를 임포트하자.

import { firestore } from "./firebase";

• firestore가 잘 연동되었는지 확인해보기 위해 컴포넌트가 useEffect 훅 안에 firestore를 콘솔에 찍어보자

import './App.css';
import { firestore } from './firebase';
import { useEffect } from 'react';

function App() {

  useEffect(() => {
    console.log(firestore);
  });

  return (
    <div className="App">
      firebase 확인해보기!
    </div>
  );
}

export default App;

• 키 밸류 값이 잘 넘어온 것을 알 수 있다.
• projectId에 내가 설정한 프로젝트 이름이 잘 넘어와있다.

 

---

Firestore에서 데이터 가져와보기

• firestore에 아래처럼 데이터가 들어있다고 가정하자.
• collection: bucket
• document: bucket_item

.collection()

• firestore와 React 프로젝트가 연동이 잘 되었으면 아래처럼 변수로 firestore의 collection에 접근해보자.

// bucket이라는 변수로 firestore의 collection인 bucket에 접근!
const bucket = firestore.collection("bucket");

[collection].doc([document]).get().then() (document 하나 가지고오기)

• 위처럼 collection에 접근한 후 해당 collection의 document에 접근하고 싶으면 아래처럼 하면된다.
• doc()안에 document의 이름을 넣고 get()을 사용해서 비동기 작업으로 데이터를 가져오자.
• 외부랑 통신을 할 때, 동기로 처리하면 데이터를 가져올 때까지 다른 일을 하지 못하므로 비동기 작업을 해서 일단 get()으로 요청을 한 후에 다른 작업을 시켜놓고 요청에 대한 답이 들어올 때 처리할 일을 then() 안에 적어주자.

// collection의 document인 "bucket_item"을 가져온다.
bucket.doc("bucket_item").get().then(
	// 비동기 작업이 끝나고 할 일.
);

[document].data() / [document].id

• 비동기 작업이 끝나면 then 안의 콜백함수의 파라미터로 doc()의 파라미터로 써준 document가 들어갈 것이다.
• 해당 파라미터에 .data()를 붙이면 데이터를 가져오고, .id를 붙이면 document의 id를 가져온다.

bucket.doc("bucket_item").get().then((doc) => {
    // document의 데이터를 가져옴
    console.log(doc.data());
    // document의 id를 가져옴
    console.log(doc.id);
});

• 아래처럼 useEffect 훅 안에서 firestore의 collection에 접근한 후 document의 데이터와 id를 콘솔창에 찍어보자.

import './App.css';
import { firestore } from './firebase';
import { useEffect } from 'react';

function App() {

  useEffect(() => {
    // bucket이라는 변수로 firestore의 collection인 bucket에 접근
    const bucket = firestore.collection("bucket");

    // collection의 document인 "bucket_item"을 가져온다.
    bucket.doc("bucket_item").get().then((doc) => {

      // document의 데이터를 가져옴
      console.log(doc.data());
      // document의 id를 가져옴
      console.log(doc.id);
    });
  });

  return (
    <div className="App">
      firebase 확인해보기!
    </div>
  );
}

export default App;

• document의 데이터와 id가 잘 출력된 모습을 볼 수 있다.

[document].exists

• document가 존재하면 true, 아니면 false를 반환한다.
• 아래처럼 .doc([document]).get().then()으로 document에 접근 한 후 then() 안의 콜백함수에서 조건문을 사용해서 docuemnt가 존재하는지 아닌지 판별할 수 있다.

bucket.doc("bucket_item").get().then((doc) => {
    // "bucket_item" document가 존재하면 아래 작업 수행
    if (doc.exists) {
    // document의 데이터를 가져옴
    console.log(doc.data());
    // document의 id를 가져옴
    console.log(doc.id);
    }
  });
});

[collection].get().then() (document 전체 가지고 오기)

• 만약 collection의 docuement를 모두 가져오고 싶으면 아래처럼 사용하면 된다.

// collection의 document인 "bucket_item"을 가져온다.
bucket.get().then(
	// 비동기 작업이 끝나고 할 일.
);

 

• then안의 콜백함수의 파라미터에 모든 document가 들어있으므로 아래처럼 반복문을 돌려서 document 하나하나의 데이터를 확인할 수 있다!

import './App.css';
import { firestore } from './firebase';
import { useEffect } from 'react';

function App() {

  useEffect(() => {
    // bucket이라는 변수로 firestore의 collection인 bucket에 접근
    const bucket = firestore.collection("bucket");

    // 모든 document 가져오기
    bucket.get().then((docs) => {
      // 반복문으로 docuemnt 하나씩 확인
      docs.forEach((doc) => {
        if(doc.exists){
          // document의 데이터
          console.log(doc.data());
          // document의 id
          console.log(doc.id);
        }
      });
    });
  
  });

  return (
    <div className="App">
      firebase 확인해보기!
    </div>
  );
}

export default App;

---