TIL : FireStore로 데이터 관리하기

Async Storage -> FireStore

Setting 하기

1. firebase에서 프로젝트를 생성하여, fireStore 데이터베이스 생성하기

2. 로그인과 회원가입 없이 데이터베이스를 사용하기 위해 규칙 재설정
   ( write : if false => write : if true )

3. firebase 설치하기
   npm install firebase

4. firebase.js 파일 생성하여 firebase 연결하기, dbService export 하기

  export const app = initializeApp(firebaseConfig);
  export const dbService = getFirestore(app);

5. App.js에 dbService import하고, 코드 적용하기

---

잘못 생각하고 있었던 점
AsyncStorage를 firestore로 리팩토링 하는 과정에서
처음에, 데이터를 저장하는 db가 있으니까 [todos,setTodos]=useState([]); 의 역할을 FireStore가 대신한다고 생각해버렸다. 그래서 코드를 작성하면서 혼동이 많이 왔었는데, FireStore는 AsyncStorage 대신이지 State 대신이 아니라는 것을 깨닫고, json서버를 이용할 때도 state만 modules에서 관리했지 db.json은 데이터만 저장했다는 사실을 인지하니 어떻게 작성해 나가야 할지 조금은 알 수 있었다.
( State는 컴포넌트 내부에서 바뀔 수 있는 값! 헷갈리지말자! )

---

Create

 const addTodo = async () => {
    await addDoc(collection(dbService, "폴더명"), 추가할 내용);
  };

Read

const q = query(
      collection(dbService, "폴더명"),
      orderBy("createdAt", "desc") //정렬기준
    );
	//onSnapshot을 이용해 firestore폴더의 내용이 변화할 때마다
    onSnapshot(q, (snapshot) => {
      const newTodos = snapshot.docs.map((doc) => {
        const newTodo = {
          id: doc.id,
          ...doc.data(),
        };
        return newTodo;
      });
      setTodos(newTodos);
    });
	//query에 있는 모든 내용을 setTodos로 state에 저장.

Update

ex ) todo 완료 toggle기능

 const setDone = async (id) => {
    const i = state명.findIndex((todo) => todo.id === id);
    await updateDoc(doc(dbService, "폴더명", id), {
      isDone: !state명[i].isDone,
    });
  };

Delete

async () => {
   await deleteDoc(doc(dbService, "폴더명", id));

---

위 내용을 정리하고 이해한 후, 코드를 직접 쳐보면서 fireStore에서 CRUD 구현을 어떤 식으로 해야하는지 익히는 시간을 가졌다. 아직은 여러 번 더 봐야 혼자 다른 것도 적용해 볼 수 있을 것 같다.