[React] 최신 Firebase Real-Time DB 사용하기

Firestore와 Real-Time DB의 차이점은 아래 글에 간략하게 정리되어있다.

[React] 최신 Firebase Firestore 사용하기

 

Real-Time DB는 doc, collection 두 가지가 존재하는 Firestore와는 다르게 ref라는 하나의 함수만 사용한다.

 

 

 

경로 선언

import {
  push,
  ref,
  limitToLast,
  onValue,
  orderByChild,
  query,
  remove,
} from "@firebase/database";
//import를 잊지말자

import { realtimeDbService } from "../firebase_config";


//경로는 아래와 같이 간단하게 선언할 수 있다.
//앞서 config 파일에서 export한 service 클래스를 가져와야한다.
  const locate = ref(realtimeDbService, `chat/${chatRoomId}/`);

 

데이터 필터링

//query구문으로 데이터를 필터링할 수 있다.
//아래의 구문은 chat/chatRoomId 아래에 있는 object들이 가진
//createdAt이라는 Field의 값으로 정렬 후 최근 50개만을 가르킨다는 의미이다.

const chatRef = query(
    ref(realtimeDbService, `chat/${cryptoId}/`),
    orderByChild("createdAt"),
    limitToLast(50)
  );

 

데이터 삽입 및 가져오기

//locate는 앞서 선언한 ref
push(locate, {
    uid: authService.currentUser.uid,
    name: authService.currentUser.displayName,
    message,
    createdAt: Timestamp.fromDate(new Date()),
  });
  
  
//데이터 가져오기
const response = await get(locate);
print(response.val());
//데이터는 val()로 불러온다.

위의 ref 혹은 query + ref로 경로와 필터링을 선언해주었다면 아래의 함수로 해당 경로내에 데이터를 삽입 할 수 있으며,

get 함수로 간단하게 데이터를 가져올 수 있다. 두 함수 모두 비동기이다. 정말 간단하게 CRUD를 구현 할 수 있다.

 

 

데이터 변경 구독하기

Firebase의 가장 큰 장점은, 소켓 기능을 정말 쉽게 사용할 수 있다는 것이다. 예를 들어 채팅같이 서버의 데이터가 변경된 경우 즉각적으로 클라이언트가 반응할 수 있다.

//앞서 설명한 데이터를 필터링하는 query이다.
const chatRef = query(
    ref(realtimeDbService, `chat/${cryptoId}/`),
    orderByChild("createdAt"),
    limitToLast(50)
  );


//query를 onValue의 첫 번째 매개변수로 주고,
//두 번째에는 아래와 같이 함수를 적어준다.
//query에 해당하는 값들이 서버에서 변경되면 아래 함수가 호출되어
//snapshot의 데이터가 서버로부터 get되고, 내부의 명령이 동작하게 된다.

onValue(chatRef, (response) => {
    print(response.val());
  });