[React] Firebase 연동 + CRUD (2)

CRUD를 작성해보자. (여기에서는 Firebase v9 를 기준으로 합니다!)

 

 

1. Create

데이터를 저장하는 방법은 addDoc과 setDoc을 이용하는 2가지 방법이 있다.

addDoc 과 setDoc의 차이 문서가 유의미한 ID인지 아닌지이다.

addDoc을 사용하면 Cloud Firestore에서 자동으로 ID를 생성해준다.

// 추가하고자 하는 데이터
const data = { ... };

// addDoc 예시
// feedbacks 컬렉션에 {randomID} document를 추가
const docRef = collection(fireStore, 'feedbacks');
await addDoc(docRef, data).then(() => {
  alert('등록되었습니다.');
  handleCancel();
});

// setDoc 예시
const timeStamp = dayjs().valueOf().toString();
// posts 컬렉션에 {timeStamp} document를 추가
const docRef = doc(fireStore, 'posts', timeStamp);
await setDoc(docRef, data).then(() => {
  alert('등록되었습니다.');
  router.push('/');
});

 

2. Read

2-1. 여러 문서 읽기

const init = async () => {
  const docRef = collection(fireStore, 'posts');
  const q = query(docRef, orderBy('endDate', 'desc')); // 조건
  const querySnapshot = await getDocs(q);

  const data: any = querySnapshot.docs.map((doc) => {
    console.log(doc.data())
    const { positions } = doc.data();
    return {
      id: doc.id,
      positions: positions,
      ...,
    };
  });
};

2-2. 단일 문서 읽기

const docRef = doc(fireStore, 'posts', did as string);
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  const data = docSnap.data();
  console.log('Document data: ', data);
} else {
  console.log('No document!');
  return false;
}

 

3. Update

- 업데이트할 필드가 있는 문서를 찾고 updateDoc 으로 필드 값을 수정

const docRef = doc(fireStore, 'posts', did);
updateDoc(docRef, {
  comments: total + 1,
});

 

4. Delete

const docRef = doc(fireStore, 'posts', did);
deleteDoc(docRef);

 

5. Etc

5-1. 문서 안의 컬렉션

// collection(fireStore, COLLECTION_ID, DOCUMENT_ID, COLLECTION_ID )
const docRef = collection(fireStore, 'posts', did, 'comments');

---

CRUD는 여기까지!

 

 

Reference

https://firebase.google.com/docs/firestore/quickstart?hl=ko 

Cloud Firestore 시작하기  |  Firebase