Firebase Firestore 활용 - 데이터 불러오기 (React)

박은경·2025년 2월 4일

Database Firebase db firestore

이번 포스팅에서는 파이어베이스를 통해 호스팅한 프로젝트에 Firestore(db)를 연동하고, db에 데이터를 삽입하고 불러오는 방법에 대해서 다뤄보고자 합니다.

1. Firestore란?

우선 firestore가 무엇인지 먼저 설명해보자면

Firestore는 Google의 클라우드 기반 NoSQL 데이터베이스 서비스로, 실시간 동기화 및 서버리스 데이터 관리를 지원합니다. 주요 특징은 다음과 같습니다:

NoSQL 문서 기반 데이터베이스: 데이터를 컬렉션과 문서(Document) 형태로 저장.
실시간 동기화: 데이터가 변경될 때 클라이언트에서 즉시 반영됨.
서버리스 데이터 관리: 백엔드 없이 클라우드에서 데이터 저장 및 읽기 가능.
보안 규칙 설정 가능: Firebase Authentication과 통합하여 사용자별 접근 권한을 설정 가능.

저는 이 서비스를 활용하여 프로젝트의 데이터를 관리하고자 합니다.

2. firestore 설정하기

파이어베이스를 통해 프로젝트를 생성하셨다는 가정하에, 파이어베이스 콘솔에서 프로젝트를 선택해 대시보드에 진입하고, 아래 이미지와 같이 프로젝트에서 활용할 수 있는 서비스 중 'Cloud Firestore'라는 항목을 선택합니다.

1) 데이터베이스 만들기

그러면 아래와 같은 화면이 보이는데, 여기서 '데이터베이스 만들기'를 클릭합니다.

2) db 위치 설정

db 생성 첫 단계에서는 위치 설정이 필요합니다.
Firestore는 클라우드 서버에서 데이터를 가져오므로, 저장 위치가 멀면 요청과 응답 시간이 길어질 수 있습니다.
저는 한국에서 서비스를 운영할 예정이기 때문에, 리전을 한국으로 설정했습니다.

3) 보안규칙 설정

이후 다음 단계에서 모드를 설정할 수 있는데, 프로덕션 모드와 테스트 모드로 총 두 가지가 존재합니다.

둘은 보안 규칙에 차이가 있는데, 테스트 모드의 경우 30일 동안은 모든 제 3자에 의해 데이터 접근이 가능합니다. (간단하게 상대적으로 보안에 취약하다는 걸로 이해했음)

이 부분은 이후 수정할 수 있으니 일단 빠른 테스트를 위해 테스트 모드를 선택했습니다.

4) 컬렉션 추가하기

위 단계를 정상적으로 거쳤다면, 아래와 같이 데이터베이스를 관리할 수 있는 대시보드가 확인됩니다.

3. 데이터 불러오기

1) 컬렉션 추가 및 데이터 삽입

데이터를 읽어오는 것부터 테스트하기 위해, 일단 데이터를 보관할 수 있는 컬렉션을 추가해보겠습니다.

앞선 단계에서 '+ 컬렉션 시작' 이라는 항목을 클릭한 후

저는 유저 정보로 테스트하고 싶어서, users라는 이름으로 컬렉션 ID를 지정해보았습니다.

이후 다음 단계에서 문서 ID를 자동 ID로 설정하고(직접 지정해도 됨),필드 & 유형 & 값을 설정합니다.

간단하게 name, email 값을 직접 삽입해주었습니다.

2) 데이터 불러오기

이번에는, db에 직접 삽입한 데이터를 불러와보겠습니다.

📌 Firestore 설정 파일 (firebaseConfig.js)

firebaseConfig 파일에 파이어스토어 관련 코드를 추가합니다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"; 

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };
export default app;

다음으로, 삽입된 데이터를 불러오기 위해 코드를 작성해보겠습니다.

저는 users라는 이름의 컬렉션을 추가했기 때문에, 아래와 같이 구성했습니다.

import { collection, getDocs } from "firebase/firestore";
import { db } from "./firebaseConfig";

const fetchUsers = async () => {
  try {
    console.log("🔄 Firestore에서 `users` 데이터 가져오는 중...");

    const usersCollection = collection(db, "users");
    const snapshot = await getDocs(usersCollection);

    if (snapshot.empty) {
      console.log("🚨 `users` 컬렉션에 데이터가 없습니다.");
      return;
    }

    snapshot.forEach((doc) => {
      console.log(`✅ 사용자 ID: ${doc.id}`, doc.data());
    });
  } catch (error) {
    console.error("🚨 Firestore 데이터 가져오기 오류:", error.message);
  }
};

export default fetchUsers;

이후, 해당 코드가 작성된 파일을 실행하게 되면 데이터 확인이 가능합니다. (파일 경로는 본인 설정에 맞게)