[FIREBASE][REACT] Firestore 데이터베이스 가져오기. getDoc과 onSnapshot의 차이는?

 

Cloud Firestore

Firebase 사용자는 데이터베이스 역할로 Cloud Firestore를 활용할 수 있다.

 

이 데이터베이스는 'collection > document > field' 3중 구조로 구성된다.

 

 

Firestore가 책장이라면 collection은 책

'주민등록부'라는 collection은 여러 사람들의 개인 정보를 가진 책이다.

한 사람의 개인 정보 문서인 document들로 구성되어 있는 것이다.

'이령'이라는 document를 하나 골라 열면

'이령'의 '생년월일', '주민등록번호', '주소' 등이 기입되어 있을텐데 이것 각각이 field인 셈이다.

 

 

 

데이터베이스의 구조에 대한 사전 설명은 이쯤하고

사용자는 이렇게 만들어진 데이터베이스를 앱 내에서 가져와 활용할 수 있다.

 

 

React앱의 경우 아래와 같이 getFirestore 메서드를 활용해 Cloud Firestore를 연동 가능하다.

import { getFirestore } from 'firebase/firestore';

// 내 App에 Firebase Project를 구성
const firebaseConfig = { /* FIREBASE_CONFIGURATION */ };
const app = initializeApp(firebaseConfig);

// Firestore 초기화
const db = getFirestore(app);

 

이제 이 db가 Firestore 연결 객체이다!

 

연결은 했으니 정보를 가져올 수 있어야지?

정보 가져오기에 활용할 수 있는 두 가지 메서드 getDoc과 onSnapshot에 대해서 알아보자.

 

 

 

---

데이터 가져오기 : getDoc

Firestore의 getDoc 메서드는 

Firestore에 저장된 document를 가져오는데 사용되는 메서드이다.

 

활용 방법은 예시를 통해 알아보자.

 

 

가져오고 싶은 문서는

'tweets' 컬렉션의 '1LDWMA9fCuItkWI9AH6k' 이다.

가져올 문서 구조 확인. tweets 컬렉션에 저장된 여러 문서들

import { doc, getDoc } from 'firebase/firestore';

const tweetDoc = await getDoc(doc(db, 'tweets', '1LDWMA9fCuItkWI9AH6k'));
const tweetData = tweetDoc.data();

console.log(tweetData);

 

getDoc(doc(firestore 연결 객체, collection 이름, document 이름)) 형태로

데이터를 추출하고 싶은 문서를 골라낸 뒤 data()로 열람하면

아래와 같이 해당 문서의 정보가 무사히 가져와짐을 확인할 수 있다.

console.log(tweetData) 결과

 

 

getDoc()은 호출된 즉시 1회 데이터를 가져온다.

이 점은 아래에서 비교할 onSnapshot()과의 차이이다.

 

 

---

데이터 실시간으로 가져오기 : onSnapshot

Firestore의 onSnapshot 메서드는

getDoc과 마찬가지로 Firestore에 저장된 document를 가져오는데 사용되는 메서드이다.

 

단, 차이점이 존재하는데

Firestore에 저장된 document나 collection의 변경 사항을 실시간으로 감지하고 처리하는데 사용되는 메서드이다.

 

 

getDoc은 호출되는 즉시 1회 데이터베이스의 현재 상태를 가져오는데에 반해

onSnapshot은 호출되는 즉시 1회 가져온 뒤에도 데이터베이스에 변경이 있을 때마다 자동으로 가져온다.

 

이를 통해 실시간으로 업데이트를 감지하면서 사용자 인터페이스를 업데이트할 수 있다.

 

 

마찬가지로 예시를 통해 활용 방법을 알아보자.

import { doc, onSnapshot } from 'firebase/firestore';

onSnapshot(
  doc(db, 'tweets', '1LDWMA9fCuItkWI9AH6k'), (snapshot) => {
    const tweetData = snapshot.data();
    console.log(tweetData);
  },
);

console.log(tweetDate) 결과

 

 

 

---

getDocs와 onSnapshot 비교하기

React 앱 프로젝트에서 두 메서드를 비교하면 차이를 눈으로 쉽게 확인할 수 있다.

 

 

먼저, getDocs를 이용해서 tweetQuery에 해당되는 문서의 데이터를 가져오는 경우다.

  useEffect(() => {
    const fetchTweets = async () => {
      const tweetsQuery = query(collection(db, 'tweets'), orderBy('createdAt', 'desc'), limit(25));
      const snapshot = await getDocs(tweetsQuery); // <---- getDocs
      const tweetList = snapshot.docs.map((doc) => {
        const { userId, userName, tweet, createdAt, photo } = doc.data();
        return {
          userId,
          userName,
          tweet,
          createdAt,
          photo,
          id: doc.id,
        };
      });
      setTweets(tweetList);
    };
    fetchTweets();
  }, []);

 

 

그리고 수정하기 폼을 이용해 해당 문서의 텍스트를 수정해보았다.

 

before) 이 몸은 데이터 정보를 보여주기 위한 테스트 케이스다!

after) 이 몸은 데이터 정보를 보여주기 위한 테스트 케이스다! - getDocs

 

 

 

 

getDocs를 이용해 데이터를 최초 렌더링 1회에 한해서만 가져오기 때문에

문서에 새로운 변동사항이 전달 됐음에도 불구하고 새로고침하지 않으면 변화가 없다.

앱을 새로고침하면 그제서야 변경된 텍스트가 반영이 됐음을 확인할 수 있다.

 

 

 

이번에는 onSnapshot을 이용해서 tweetQuery에 해당되는 문서의 데이터를 가져오는 경우다.

  useEffect(() => {
    const fetchTweets = async () => {
      const tweetsQuery = query(collection(db, 'tweets'), orderBy('createdAt', 'desc'), limit(25));
      await onSnapshot(tweetsQuery, (snapshot) => { // <---- onSnapshot
        const tweetList = snapshot.docs.map((doc) => {
          const { userId, userName, tweet, createdAt, photo } = doc.data();
          return {
            userId,
            userName,
            tweet,
            createdAt,
            photo,
            id: doc.id,
          };
        });
        setTweets(tweetList);
      });
    };
    fetchTweets();
  }, []);

 

 

이번에도 수정하기 폼을 이용해 해당 문서의 텍스트를 수정해보았다.

 

before) 이 몸은 데이터 정보를 보여주기 위한 테스트 케이스다! - getDocs

after) 이 몸은 데이터 정보를 보여주기 위한 테스트 케이스다! - onSnapshot

 

 

 

 

onSnapshot을 이용해 데이터를 가져오게 했으므로 실시간 문서 변화를 추적한다.

때문에 새로운 변동사항 전달과 동시에 새로고침 없이도 변경 내역이 반영된다.

 

 

 

한 번만 데이터를 가져오면 충분한 기능과

실시간으로 데이터를 가져오면 좋을 기능을 구분해서

두 메소드를 필요에 맞게 활용하면 된다! 굿! 👌

 

---

참고

파이어베이스 공식 문서 - Cloud Firestore로 데이터 가져오기

파이어베이스 공식 문서 - Cloud Firestore로 실시간 업데이트 가져오기

노마드코더 - 트위터 클론코딩 #4.5 Realtime Tweets

Firestore 사용시 주의점