React에서 Firebase Firestore 사용법

 

Firebase Firestore는 Google에서 제공하는 NoSQL 클라우드 데이터베이스로, 실시간 데이터 동기화와 간편한 데이터 관리 기능을 제공합니다. React와 Firestore를 함께 사용하면 강력하고 동적인 웹 애플리케이션을 빠르게 구축할 수 있습니다. 이 글에서는 React에서 Firestore를 사용하는 방법을 단계별로 알아보겠습니다.

---

1. Firebase 프로젝트 설정

Firestore를 사용하기 위해 먼저 Firebase 프로젝트를 생성하고 Firestore 데이터베이스를 설정해야 합니다.

Firebase 프로젝트 생성

1. Firebase Console에 접속합니다.
2. 새로운 프로젝트를 생성하거나 기존 프로젝트를 엽니다.
3. "Build" > "Firestore Database"로 이동하여 Firestore를 활성화합니다.

Firestore 보안 규칙 설정

개발 초기에는 테스트용 보안 규칙을 설정합니다. 이후 배포 시에는 적절한 보안 규칙을 적용하세요.

{
  "rules": {
    "users": {
      "read": "auth != null",
      "write": "auth != null"
    }
  }
}

---

2. React 애플리케이션에 Firebase 추가

Firebase SDK를 React 프로젝트에 설치하고 초기화합니다.

Firebase 설치

npm install firebase

Firebase 초기화

Firebase 설정 정보를 포함한 firebase.js 파일을 생성합니다.

// firebase.js
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 };

---

3. Firestore 데이터 읽기

Firestore에서 데이터를 읽는 방법을 알아보겠습니다.

데이터 컬렉션 가져오기

Firestore에서 컬렉션의 데이터를 가져오려면 getDocs와 collection을 사용합니다.

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

async function fetchUsers() {
  const querySnapshot = await getDocs(collection(db, "users"));
  const users = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
  console.log(users);
}

fetchUsers();

React 컴포넌트에서 사용하기

데이터를 React 상태로 관리하고 화면에 렌더링합니다.

import React, { useEffect, useState } from "react";
import { collection, getDocs } from "firebase/firestore";
import { db } from "./firebase";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const querySnapshot = await getDocs(collection(db, "users"));
      setUsers(querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));
    }

    fetchData();
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

---

4. Firestore 데이터 쓰기

Firestore에 데이터를 쓰는 방법을 살펴보겠습니다.

데이터 추가하기

addDoc를 사용하여 데이터를 Firestore에 추가합니다.

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

async function addUser() {
  try {
    const docRef = await addDoc(collection(db, "users"), {
      name: "John Doe",
      age: 30,
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

addUser();

React 컴포넌트에서 데이터 추가하기

사용자의 입력을 받아 데이터를 추가합니다.

import React, { useState } from "react";
import { collection, addDoc } from "firebase/firestore";
import { db } from "./firebase";

function AddUserForm() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await addDoc(collection(db, "users"), { name, age: Number(age) });
      alert("User added successfully!");
    } catch (e) {
      console.error("Error adding user: ", e);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        placeholder="Age"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
      <button type="submit">Add User</button>
    </form>
  );
}

export default AddUserForm;

---

5. Firestore 데이터 업데이트 및 삭제

Firestore에서 데이터를 업데이트하거나 삭제하는 방법을 알아보겠습니다.

데이터 업데이트하기

updateDoc를 사용하여 문서를 업데이트합니다.

import { doc, updateDoc } from "firebase/firestore";
import { db } from "./firebase";

async function updateUser(userId, newData) {
  const userRef = doc(db, "users", userId);
  try {
    await updateDoc(userRef, newData);
    console.log("Document updated successfully");
  } catch (e) {
    console.error("Error updating document: ", e);
  }
}

updateUser("userId123", { age: 35 });

데이터 삭제하기

deleteDoc를 사용하여 문서를 삭제합니다.

import { doc, deleteDoc } from "firebase/firestore";
import { db } from "./firebase";

async function deleteUser(userId) {
  const userRef = doc(db, "users", userId);
  try {
    await deleteDoc(userRef);
    console.log("Document deleted successfully");
  } catch (e) {
    console.error("Error deleting document: ", e);
  }
}

deleteUser("userId123");

---

6. 결론

React에서 Firebase Firestore를 사용하면 실시간 데이터베이스 기능을 쉽게 통합할 수 있습니다. 이 글에서는 Firestore의 기본 설정부터 데이터 읽기, 쓰기, 업데이트, 삭제까지 살펴보았습니다. 이제 이러한 기술을 활용해 강력한 데이터 중심 애플리케이션을 구축해 보세요!