파이어베이스 X 리액트 - CRUD구현(1)

오늘은 파이어 베이스에서 CRUD를 구현해볼 것이다.

 

먼저,

클라우드 파이어스토어라는 것을 만들어줘야 한다. 이것이 우리가 사용할 데이터베이스이다.

test모드로 데이터베이스를 생성해주면 이제 리액트에서 파이어 베이스를 사용할 준비가 되었다.

 

import 'firebase/firestore';

모듈을 불러와주고,

export const dbService = firebase.firestore();

다른 컴포넌트에서 접근할 수 있게 export를 해준다.

 

그러면 이제 우리가 의지해야하는것은 공식 docs인데,

 

공식 Docs에 데이터 추가 및 관리 부분에서 데이터 추가 부분을 보도록 하겠다.

 

그러면 이렇게 예제코드가 나온다.

위 코드를 해석해보자면, cities 하는 컬렉션을 만들고 그 안에 LA라는 doc을 생성한다는 것이다.

여기서 콜랙션에 값을 추가하는 메서드는 

dbService.collection('collection name').add(data)

이런식으로 해주면 된다. 여기서 data는 객 체형 테이다.

그래서 실제 코드에서는 

이런 식으로 코드를 짰다.

createObj에 값들을 저장시킨 후에, add에 createObj를 파라미터로 전달하는 방식을 사용했다.

이제 onSubmit을 실행시켜보면,

 

이렇게 doc이 추가되는 모습을 볼 수 있다.

아까 만들었던 필드가 잘 들어갔다.

 

여기서 데이터를 add 하고 데이터베이스를 보면 실시간으로 데이터가 추가되고 업데이트가 되는 모습을 볼 수 있는데,

프런트상에서 실시간 업데이트를 사용하려면 어떤 것을 사용해야 하는지 알아보자.

 

dbService.collection('collection_name').onSnapshot((snapshot) => {
      const array = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setArrays(array);
   });

 

대충 이런 식으로 했다.

onSnapShot이라는 거는 데이터가 CRUD이벤트가 감지가 되었을 때 실행하는 것이다.

즉, 우리는 저 이벤트가 일어날 때마다 배열을 렌더링 할 set함수를 업데이트해주면 실시간으로 데이터가 랜더링 되는 것을 볼 수 있는 것이다.

 

onSnapShot의 공식 문서를 한번 살펴보도록 하자.

 

https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference#onsnapshot

CollectionReference | JavaScript SDK  |  Firebase

위의 공식문서를 보면서 한번 이해해보는 걸 추천한다.

 

다음 시간에는 데이터의 실시간 업데이트 , 읽기를 완료했기 때문에 수정, 삭제를 구현해보도록 하겠다.