리액트와 Firebase를 이용한 실시간 데이터베이스 구축

byCode Keeper •


리액트와 Firebase를 이용한 실시간 데이터베이스 구축


Firebase는 구글에서 제공하는 강력한 백엔드 서비스로, 실시간 데이터베이스, 인증, 호스팅, 클라우드 기능 등을 포함하고 있습니다. 리액트 애플리케이션에서 Firebase의 실시간 데이터베이스를 사용하면 데이터를 쉽게 저장하고, 실시간으로 동기화할 수 있습니다. 이 포스팅에서는 Firebase를 사용하여 리액트 애플리케이션에 실시간 데이터베이스를 구현하는 방법을 살펴보겠습니다.


Firebase의 중요성


Firebase는 다음과 같은 장점을 제공합니다:

  • 실시간 데이터베이스: 데이터를 실시간으로 동기화하여, 사용자 간의 데이터 일관성을 유지할 수 있습니다.
  • 손쉬운 통합: 다양한 플랫폼과 손쉽게 통합할 수 있으며, 리액트와의 호환성도 뛰어납니다.
  • 다양한 기능 제공: 인증, 호스팅, 클라우드 함수 등 다양한 기능을 함께 제공하여, 전체 백엔드 인프라를 쉽게 관리할 수 있습니다.

프로젝트 설정 및 Firebase 설치


Firebase를 사용하기 위해 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 프로젝트를 생성하고 필요한 패키지를 설치합니다.


npx create-react-app my-firebase-app --template typescript
cd my-firebase-app
npm install firebase

Firebase 프로젝트 설정


Firebase 콘솔에서 새 프로젝트를 생성하고, 웹 앱을 추가합니다. 그런 다음 Firebase SDK 설정 정보를 가져옵니다.


Firebase 초기화


Firebase를 초기화하기 위해 src/firebaseConfig.js 파일을 생성하고, 다음과 같이 설정합니다.


// src/firebaseConfig.js
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';

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",
  measurementId: "YOUR_MEASUREMENT_ID",
  databaseURL: "YOUR_DATABASE_URL"
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

export { app, database };

위 코드에서는 Firebase 프로젝트의 설정 정보를 사용하여 Firebase 앱을 초기화하고, 실시간 데이터베이스 인스턴스를 생성합니다.


데이터베이스 읽기 및 쓰기


이제 Firebase 실시간 데이터베이스를 사용하여 데이터를 읽고 쓰는 방법을 살펴보겠습니다.


데이터 쓰기


Firebase 데이터베이스에 데이터를 쓰기 위해 set 함수를 사용합니다.


// src/components/WriteData.js
import React, { useState } from 'react';
import { getDatabase, ref, set } from 'firebase/database';

const WriteData = () => {
  const [value, setValue] = useState('');
  const database = getDatabase();

  const handleSubmit = (e) => {
    e.preventDefault();
    set(ref(database, 'data/'), {
      value: value
    });
    setValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
        placeholder="Enter some data" 
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default WriteData;

위 코드에서는 사용자가 입력한 데이터를 Firebase 데이터베이스에 저장합니다.


데이터 읽기


Firebase 데이터베이스에서 데이터를 읽기 위해 onValue 함수를 사용합니다.


// src/components/ReadData.js
import React, { useEffect, useState } from 'react';
import { getDatabase, ref, onValue } from 'firebase/database';

const ReadData = () => {
  const [data, setData] = useState(null);
  const database = getDatabase();

  useEffect(() => {
    const dataRef = ref(database, 'data/');
    onValue(dataRef, (snapshot) => {
      const data = snapshot.val();
      setData(data);
    });
  }, [database]);

  return (
    <div>
      <h2>Data from Firebase</h2>
      {data ? <p>{data.value}</p> : <p>Loading...</p>}
    </div>
  );
};

export default ReadData;

위 코드에서는 Firebase 데이터베이스에서 데이터를 실시간으로 읽어와서 화면에 출력합니다.


리액트와 Firebase 연동 예제


리액트 컴포넌트를 사용하여 데이터를 쓰고 읽는 예제를 구성해보겠습니다.


// src/App.js
import React from 'react';
import WriteData from './components/WriteData';
import ReadData from './components/ReadData';

const App = () => {
  return (
    <div>
      <h1>React Firebase Realtime Database</h1>
      <WriteData />
      <ReadData />
    </div>
  );
};

export default App;

위 코드에서는 WriteData와 ReadData 컴포넌트를 포함하여 데이터를 쓰고 읽는 기능을 제공하는 간단한 애플리케이션을 구성합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Firebase를 사용하여 리액트 애플리케이션에 실시간 데이터베이스를 구현하는 방법에 대해 살펴보았습니다. Firebase는 실시간 데이터 동기화, 쉬운 통합, 다양한 기능 제공을 통해 효율적인 백엔드 서비스를 제공합니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전