Firebase를 사용한 Real time DB 가이드 (in React Native)

---

1. Firebase 프로젝트 생성

1. firebase 사이트 접속

https://console.firebase.google.com/

2. 프로젝트 생성

• 프로젝트 추가 클릭

• 프로젝트 이름 입력 → 계속 클릭

• 계속 클릭

• Default Account 선택 → 프로젝트 만들기

• 계속 클릭

• 프로젝트 개요 → 프로젝트 설정 클릭

• 안드로이드 아이콘 클릭

• Android Studio 실행 → open 클릭 → 프로젝트의 android 폴더 선택 → open 클릭

• android/app/build.gradle에서 applicationId 값 확인
• Android 패키지 이름 : com.myproject

• Android 패키지 이름 입력 → 앱 닉네임 입력 (선택사항) → 앱 등록 클릭

• google-services.json 다운로드 클릭 → 다음 클릭

• 코드 추가

classpath 'com.google.gms:google-services:4.3.13'

• 코드 추가

• 다음

• 영상 가이드에서와 firebase 사이트의 코드가 다릅니다.
• 영상 가이드의 설명대로 진행하였습니다.

apply plugin: 'com.android.application'
// Add this line
apply plugin: 'com.google.gms.google-services'

dependencies {
  // Import the Firebase BoM
  implementation platform('com.google.firebase:firebase-bom:31.1.0')


  // TODO: Add the dependencies for Firebase products you want to use
  // When using the BoM, don't specify versions in Firebase dependencies
  implementation 'com.google.firebase:firebase-analytics'


  // Add the dependencies for any other desired Firebase products
  // https://firebase.google.com/docs/android/setup#available-libraries
}

• android/app/build.gradle

• android/app/build.gradle

• 다음 클릭

• 콘솔로 이동 클릭

• App이 firebase console에 추가된 것을 확인할 수 있습니다.

• android/app 위치에 다운받은 파일 google-service.json을 위치시킵니다.

  

• 가이드 사이트는 https://rnfirebase.io/ 입니다.
• 다음 코드를 프로젝트에서 실행

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

• 다음 코드를 실행

# Install & setup the app module
yarn add @react-native-firebase/app

# Install the database module
yarn add @react-native-firebase/database

# If you're developing your app using iOS, run this command
cd ios/ && pod install && cd ..

• firebase 사이트 → 빌드 → Realtime Database 클릭

• 데이터베이스 만들기 클릭

• 다음 클릭

• 테스트 모드에서 시작 선택 → 사용 설정 클릭

• + 클릭

• 아래의 사진과 같이 입력 → 추가 클릭

2. Firebase 사용법

1. 데이터 일회성 읽기

• App.tsx에 코드 추가

import database from '@react-native-firebase/database';

// 데이터 일회성 읽기
database()
  .ref('/User')
  .once('value')
  .then(snapshot => {
    console.log('** 데이터 일회성 읽기 **');
    console.log('User data: ', snapshot.val());
  });

yarn android 결과

• 데이터 실시간 변경
• DB 데이터가 변경될 때 마다 데이터를 새로 불러옵니다.

// App.tsx에 추가

database()
  .ref('/User')
  .on('value', snapshot => {
    console.log('** 데이터 실시간 변경 **');
    console.log('User data: ', snapshot.val());
  });

const App = () => {
  return (
    <View>
      <Text>Hello World!</Text>
    </View>
  );
};

yarn android 결과

• DB의 데이터를 변경해주면 새로 데이터를 불러옵니다.