[Firebase] CRUD 기초

CRUD

0. CRUD import 기본

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

doc(dbService, "Tasks", id)  // 파일까지 접근이 필요한 경우!

collection(dbService, "Tasks") // 폴더까지만 접근이 필요한 경우!

https://velog.io/@cmaw/Firebase-%EA%B8%B0%EB%B3%B8-%EC%85%8B%ED%8C%85

기초 셋팅 필수!

1. Create (addDoc)

const onSubmitTask = async () => {
    const newtask = {
      // id: uuid.v4(),
      task,
      isDone: false,
      isEdit: false,
      category,
      createAt: Date.now(),
    };
    await addDoc(collection(dbService, "Tasks"), newtask);
    setTask("");
  };

newtask 객체를 생성하여 addDoc 으로 fireStore 에 저장한다.

id 는 자동으로 파일명에 고유한 값으로 부여됨으로 추가하지 않아도 됨.

await addDoc(collection(dbService, "Tasks"), newtask);

dbService 에 collection 으로 접근하여 Tasks 의 폴더안에 newtask 파일을 추가한다.

2. Read (getDocs, query, getDoc)

useEffect(() => {
    const q = query(
      collection(dbService, "Tasks"),
      orderBy("createAt", "desc") // 해당 collection 내의 docs들을 createdAt 속성을 내림차순 기준으로
    );
    onSnapshot(q, (snapshot) => {
      // q (쿼리)안에 담긴 collection 내의 변화가 생길 때 마다 매번 실행됨
      const newTasks = snapshot.docs.map((doc) => {
        const newTask = {
          id: doc.id,
          ...doc.data(), // doc.data() : { text, createdAt, ...  }
        };
        // console.log(newTask);
        return newTask;
      });

      setTasklist(newTasks);
    });
  }, []);

useEffect 를 사용해 렌더링 될때 마다 Read 가 되게 함.

query 를 사용하여 Tasks 폴더의 파일들을
orderBy 를 통해 createAt 를 기준으로 desc 차순으로 정렬하여 가져옴.

onSnapshot 메소드를 통해 q에 변화가 생길때마다 실행이 되는 명령어로 만듦.
예문처럼 따로 써도 되지만 .onSnapshot 으로 사용해도 됨.

가져온 task 엔 id 값이 없기 때문에 .map 을 이용하여 객체에 id 를 추가해 주고
newTask 로 return 값을 받아 새로운 newTasks 를 생성.

query 사용시 오타 주의!

const snapshot = await getDoc(doc(dbService, "Tasks", id));

snapshot.data().""
snapshot.id

Tasks 폴더에 id 파일명인 객체를 snapshot 에 저장.

.data() , .id 등을 사용해 객체안의 값을 지정해 가져올 수 있다.

Read 읽기 이므로 바로 수정은 불가능.

3. Update (updateDoc)

const editInputhandler = async (id) => {
    await updateDoc(doc(dbService, "Tasks", id), { isEdit: true });
  };

Tasks -> id 에 접근하여 객체 속의 변수를 지정해 값을 update 함.

id: {
isEdit: false 를 isEdit: true 로 변환.
}

수정해야 할 값을 알아야 변환이 가능하다면
getDoc 을 이용하여 값을 읽어 사용하면 된다.

4. Delete (deleteDoc)

const deleteTask = async (id) => {
    await deleteDoc(doc(dbService, "Tasks", id));
  };

id 파일 명을 삭제함.