TIL(8)Friebase

파이어베이스란?

 

클라우드 데이터베이스를 제공하는 서비스입니다.

그 외에도 호스팅으로 배포도 도와주고 다양한 기능이 있습니다.

 

파이어베이스를 통해서 데이터들을 서버에 저장하고 CURD를 해봅니다.

 

 

Firebase 설정 & 연동

프로젝트 생성 후 프로젝트 설정의 일반 탭의 코드를 복사해서 firebase.js 에 붙여준다.

 

import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"

const firebaseConfig = {
  apiKey: API키 입력,
  authDomain: "spart-react-basic-a0a65.firebaseapp.com",
  projectId: "spart-react-basic-a0a65",
  storageBucket: "spart-react-basic-a0a65.appspot.com",
  messagingSenderId: "249026604960",
  appId: "1:249026604960:web:084024927d9d9a37cc7ec5",
  measurementId: "G-EXWJRK6MB0",
}

initializeApp(firebaseConfig)


export const db = getFirestore()

---

components 에서 db를 가져와서 useEffect로 데이터 불러오기

 

잠깐 useEffect 란?

useEfffect

useEffect 란
useEffect Hook 은 함수형 컴포넌트에서 사용되며,
class 형에서 렌더링 직후 실행되는 DidMount 와 상태를 변경해줄때 실행하는 DidUpdate,
제거될때의 unMount(CleanUp) 즉 라이프사이클을 하나의 훅으로 사용 할 수 있게 됨,

useEffect(() => {},[의존성배열])

렌더링되고 나서 딱 한번 실행되며,
의존성 배열이 바뀔때만 useEffect 는 다시 실행된다.(Update)
의존성 배열을 생략한다면 리렌더링 될 때 마다 실행됨,

https://ko.reactjs.org/docs/hooks-effect.html

다시.. 본론으로 와서

Components 에서 db를 가져와서 useEffect로 데이터 불러오기

const bucket = firestore.collection("buckets");
React.useEffect(() => {
    console.log(db);
  }, []);

db가 잘 불러와졌다면 firebase 를 이용해봅시다.

 

READ

// db 불러오기

import { db } from "./firebase";
import { collection, getDoc, getDocs } from "firebase/firestore";



React.useEffect(async() => {
    const query = await getDocs(collection(db, 'firebase 저장소이름'));
		
    query.forEach((doc) => {
      console.log(doc.id, doc.data());
    });
  }, []);
  
  //collection() 으로 찾고 getDocs() 로 콜렉션 내의 데이터를 가져옵니다.

CREATE

// 데이터 추가


const docRef = await addDoc(collection(db, 'firebase 저장소이름'), {
     // 바꿔줄date
   })

UPDATE

React.useEffect(async() => {
    const docRef = doc(db, "Firebase 저장소 이름", "firebase id값");
    await updateDoc(docRef, {
      id 값의 상태변환
    });

  }, []);

DELETE

React.useEffect(async() => {
    const docRef = doc(db, "firebase 저장소 이름", "firebase id값");
    await deleteDoc(docRef);
  }, []);