[Realtime Database] Setting

~ 아두이노랑 연결하는 프로젝트 시 Realtime Database를 써야 할 때가 있어서 이번 기회를 통해 익혀보고자 한다. ~

 

리액트 초기 세팅은 평소대로 해두기.

콘솔로가서 프로젝트 추가까지도 똑같음.

 

앱을 클릭한 후 톱니바퀴를 누른다.

 

 

밑에 내리면, SDK 설정 및 구성-> firebaseConfig의 코드를 fbase추가 후 코드 추가하기.

이건 늘 하던 대로. env로 하면 된다.

(databaseURL도 env로 하고 싶은데,,,,,, 그럼 프로젝트 실행할 때 오류가 생긴다....

그 이유를 아는 사람.... 댓글로 알려주세요....

url로 접속해봤자 아무것도 할 수 있는 거 없으니까 괜찮겠지.....)

 

사용하는 것만 우선 등록함

realtime database를 사용해야하니 database를 추가해줘야 한다.

 

fbase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/database';

const fbase = {
  apiKey: process.env.REACT_APP_API_KEY,
  databaseURL:"https://a-seat-for-pregnant-women-default-rtdb.firebaseio.com",
  projectId: process.env.REACT_APP_PROJECT_ID,
};

const firebaseApp=firebase.initializeApp(fbase);


export const firebaseDB=firebaseApp.database();

 

 

그 후 firebase 모듈 설치

npm i firebase

 

여기까지는 firestore랑 비슷한데, Read할 때 약간 다르다....

불러오는 값들을 따로 저장해주는 js파일을 만드는 블로그 참고하고 성공해서 그거로 할까 하다가,

평소에 쓰던거랑 비슷한 대로 수정해 봤는 데 성공해서 내 블로그에 남긴다 ㅋㅎㅋㅎ 

 

Home.js

import React, { useEffect, useState } from "react";
import "firebase/database";
import { firebaseDB } from '../fbase';

const Home = () => {
  const [pressValue, setPressValue] = useState(null);

  useEffect(() => {
    const dataBase = firebaseDB.ref(`press`);
    dataBase.on('value', snapshot => {
      const data = snapshot.val();
      setPressValue(data);
  })
  return dataBase.off;
  }, [])


  return (
    <>
    <h2>값 불러오기</h2>
    <p>{pressValue || "Loading..."}</p>
    
    </>
  );
};

export default Home;

pressValue에 내가 사용할 값들을 등록해 줄 거라서 useState를 사용할 것이다.

그리고 값을 계속 불러와야 하니까 useEffect를 통해 Firebase 데이터베이스의 'press'경로에 대한 참조를 만들고,

on을 사용해서 데이터의 변경을 학인한다. 

이렇게 하면 value 이벤트가 발생할 때마다 콜백함수가 실행된다.

 

콜백함수는 스냅샷(snapshot) 객체를 통해 데이터베이스의 값을 가져온다. snapshot.val()을 사용하여 snapshot의 데이터를 JavaScript 객체로 변환한 후, setPressValue 함수를 호출하여 pressValue 상태를 업데이트한다.

이렇게 함으로써 Firebase에서 가져온 값을 컴포넌트에서 사용할 수 있게 된다.

 

마지막으로, useEffect의 반환값으로 dataBase.off를 지정하여 컴포넌트가 언마운트될 때 Firebase 구독을 해제합니다. 이렇게 함으로써 불필요한 리소스 사용을 방지할 수 있다.

 

값 불러오기 성공 !

 

 

전체 코드

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

 

App.js

import React from 'react';
import AppRouter from './Router';
import 'firebase/compat/database';


const App = () => {
  return <AppRouter />;
};

export default App;

 

Router.js

import React from "react";
import { BrowserRouter, Routes } from "react-router-dom";
import {Route} from "react-router-dom";
import Home from "../routes/Home";


const AppRouter = () => {
  return (
    <BrowserRouter>
        <Routes>
            <Route exact path="/" element={<Home />} />
      </Routes>
      </BrowserRouter>

  );
};

export default AppRouter;

export default AppRouter;

 

 

 

참고한 블로그

참고한 블로그2