[Firebase] FireStore 데이터 CRUD 연습해보기

데이터를 가지고 와보자 !

import { collection, getDoc, getDocs ,addDoc , updateDoc ,doc , deleteDoc} from "firebase/firestore";

 

• collection : 
• getDoc : 하나만 가지고올때
• getDocs : 여러개 한번에 가지고 올때 
• addDoc : 데이터 추가하기 
• updateDoc : 데이터 수정
• doc : 도큐먼트 정보 (데이터 수정시 필요)s
• deleteDoc : 데이터 삭제 

 

파이어베이스 데이터 접근 순서 : collection -> Doc

---

콘솔에 가져온 정보 확인해보기

 React.useEffect(() => {
    //파이어베이스 잘 db확인해보기
    console.log(db);
    
    // collection(db정보,콜렉션 이름)
    // collection(db,"card")
    //collection의 모든 도큐먼트 정보 가져오기
    const query = getDocs(collection(db, "collection(db,card)"));
    console.log(query);
  }, []);

 

데이터 요청이 Promise 로 구성이 되어있는데 서버와 통신은 요청의 응답을 확실할 수가 없다 (비동기 통신) 

Promise 정보는 async , await 로 확인할 수 있다 

function App() {
  React.useEffect(async() => {
    const query = await getDocs(collection(db, "collection(db,card)"));
    console.log(query);
  }, []);

 

우리가 가지고온 객체를 forEach() 내장함수를 사용하여 각 도큐먼트의 id 와 data를 확인해보자

React.useEffect(async () => {
    console.log(db);

    const query = await getDocs(collection(db, "card"));
    console.log(query);

    // 읽기좋은형식으로 뺴보자 forEach
    query.forEach((doc) => {
      console.log(doc.id, doc.data());
    });
  }, []);

---

데이터 추가해보기 

React.useEffect(async () => {
    console.log(db);
   
    // addDoc(collection(db,"card"),{추가할 데이터 })
    addDoc( collection(db,"card"),{word:"new",explanation:"new_explanation",example:"new_example"})

  }, []);

 

---

데이터 수정해보기 

function App() {
  React.useEffect(async () => {
    console.log(db);

    // 어떤걸 수정할건지 필요하다 Doc
    // doc(db,"card","id")
    const docRef = doc(db, "card", "4AikrlWtIjhRHwjhk1S4");
    // 어떤거 수정할래, 어떤정보로 수정할래
    updateDoc(docRef, { word: "Nooo" });
  }, []);

---

데이터 삭제해보기

function App() {
  React.useEffect(async () => {
    console.log(db);

 	//doc 정보 가져오기 
    const docRef = doc(db, "card", "F3g8FPOd31z5h6NBLqqo");
    // 어떤거 삭제할래
    deleteDoc(docRef);
  }, []);

 

---

collection 이름을 변경해서 넣어보기

• 컬렉션을 미리 넣지 않아도 추가 할 수있다.

 React.useEffect(async () => {
    console.log(db);

    // collection(db,"cards")

    addDoc(collection(db, "cards"), { word: "new" });
  }, []);

---

 

collection 데이터를 가지고 놀아보며 firebase와 친해지기 !!