React-Native [10. Firebase로 데이터 관리하기]
Firebase
특징
구글에서 만든 서버리스(Serverless) 서비스
Serverless
서버가 없다는 뜻이 아닌, 서버를 직접 만들 필요가 없다는 뜻!
필요한 서버 기능을 제공하는곳에서 서비스를 사용하기 때문에 매우 편리하다.
생성 및 설정
프로젝트를 생성한 후 앱/파일 저장소/리얼타임 데이터베이스를 생성해야한다.
앱 생성은 현재 개발중인 앱과 연동을 위해 필요한 작업이다.
이미지 저장은 파일 저장소에, JSON 데이터 관리는 리얼타임 데이터베이스에서 하기 때문에, 각각 생성해야한다!
앱 생성
Firebase 가입 -> 프로젝트 생성 -> 프로젝트 내에서 앱 생성(React-native, expo는 웹 앱) ->
"웹 앱에 Firebase 추가"(Firebase 호스팅은 선택 X!) -> 프로젝트 설정 페이지에서 SDK 확인
파일 저장소 생성(Storage)
좌측 메뉴의 Storage -> Storage 생성
리얼타임 데이터베이스 생성
좌측 메뉴의 Realtime Database -> 생성 -> "규칙"에서 read/write 모두 true로!
Firebase 설치 및 연동
설치코드
expo install firebase
firebaseConfig.js 생성
App.js가 위치한 폴더에 firebaseConfig.js를 생성한다.
생성했던 Firebase와 연동하기 위한 환경설정을 하는 파일!
firebaseConfig.js
import firebase from "firebase/compat/app";
// 사용할 파이어베이스 서비스 주석을 해제합니다
//import "firebase/compat/auth";
import "firebase/compat/database";
//import "firebase/compat/firestore";
//import "firebase/compat/functions";
import "firebase/compat/storage";
// Initialize Firebase
//파이어베이스 사이트에서 봤던 연결정보를 여기에 가져옵니다
const firebaseConfig = {
apiKey: "~~~~",
authDomain: "~~~~",
databaseURL: "https://sparta-myhoneytip-minbro-default-rtdb.firebaseio.com",
projectId: "sparta-myhoneytip-minbro",
storageBucket: "sparta-myhoneytip-minbro.appspot.com",
messagingSenderId: "~~~~",
appId: "~~~~",
measurementId: "~~~~",
};
//사용 방법입니다.
//파이어베이스 연결에 혹시 오류가 있을 경우를 대비한 코드로 알아두면 됩니다.
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
export const firebase_db = firebase.database();
- 생성한 앱 코드를 firebaseConfig 딕셔너리 안에 입력한다.
- databaseURL에는 생성한 리얼타임 데이터베이스 링크를 입력한다.
Firebase에서 데이터 가져오기
예시코드
MainPage.js
import React, { useState, useEffect } from "react";
import main from "../assets/jordan.jpg";
import {StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from "react-native";
import data from "../data.json"; // 더이상 사용하지 않고 firebase에서 불러온다!
import Card from "../components/Card";
import Loading from "../components/Loading";
import { StatusBar } from "expo-status-bar";
import * as Location from "expo-location";
import { Alert } from "react-native-web";
import axios from "axios";
import {firebase_db} from "../firebaseConfig"
export default function MainPage({ navigation, route }) {
console.disableYellowBox = true;
const [state, setState] = useState([]);
const [cateState, setCateState] = useState([]);
const [ready, setReady] = useState(true);
const [weather, setWeather] = useState({ temp: 0, condition: "" });
useEffect(() => {
navigation.setOptions({
title: "나만의 꿀팁",
});
firebase_db
.ref("/tip")
.once("value")
.then((snapshot) => {
console.log("파이어베이스에서 데이터 가져왔습니다!!");
let tip = snapshot.val();
setState(tip);
setCateState(tip);
getLocation();
setReady(false);
});
}, []);
.
.
.
사용법
import {firebase_db} from "../firebaseConfig"
- firebaseConfig에서 export한 firebase_db를 import한다.
firebase_db
.ref("/tip")
.once("value")
.then((snapshot) => {
console.log("파이어베이스에서 데이터 가져왔습니다!!");
let tip = snapshot.val();
setState(tip);
setCateState(tip);
getLocation();
setReady(false);
});
- 리얼타임 데이터베이스에 "tip"으로 입력되어있는 데이터(기존 data.json)을 불러오는 함수를 사용하여 tip을 가져온다.
- 우선적으로 데이터베이스에서 데이터를 가져와야하기 때문에, setTimeout 함수는 이제 사용하지 않는다!
- 애초에 setTimeout을 사용하여 화면전환 속도를 조절하는것은 결코 좋은 방법이 아니다...
Author And Source
이 문제에 관하여(React-Native [10. Firebase로 데이터 관리하기]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minbrother/React-Native-10.-Firebase로-데이터-관리하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)