[React Native] Firebase Cloud Firestore 연결하기 #2 - Firestore 저장하기.

 

이번 편을 보시기 전에 ReactNative 프로젝트에 Firebase 설정이 되어 있지않다면 아래 포스팅을 확인하고 오세요.

2020/11/19 - [React Native] - [React Native] Firebase Cloud Firestore 연결하기 #1 - 프로젝트 설정

[React Native] Firebase Cloude Firestore 연결하기 #1 - 프로젝트 설정

프로젝트 설정이 끝났으니 Cloud Firestore을 설정해보겠습니다.

 

01. Firestore 설치

 

프로젝트에 아래 명령어로 Firestore를 설치합니다.

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

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

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

설치가 완료되면 빌드를 진행합니다.

react-native run-android

만약, 아래와 같은 빌드 Error가 발생한다면 아래를 진행합니다.

 

step.1 

/android/app/build.gradle 파일에 아래 설정을 추가합니다.

android {
    defaultConfig {
        // ...
        multiDexEnabled true // <-- ADD THIS in the defaultConfig section
    }
    // ...
}

dependencies {
  implementation 'androidx.multidex:multidex:2.0.1'  // <-- ADD THIS DEPENDENCY
}

 

step.2

android/app/src/main/java/.../MainApplication.java 파일에 아래와 같이 변경합니다.

// ... all your other imports here
import androidx.multidex.MultiDexApplication; // <-- ADD THIS IMPORT


// Your class definition needs `extends MultiDexApplication` like below
public class MainApplication extends MultiDexApplication implements ReactApplication {

 

그 다음 다시 빌드를 시작합니다.

react-native run-android

정상으로 프로젝트가 실행되었다면 완료.

 

02. 간단한 Todo 만들어보기

 

간단한 Todo를 만들어보면서 DB가 어떻게 동작되는지 확인해보겠습니다.

 

root 폴더에 Todos.js를 아래와 같이 생성합니다.

import React, {useState} from 'react';
import { ScrollView, Text } from 'react-native';

import firestore from '@react-native-firebase/firestore';
import { Appbar, TextInput, Button } from 'react-native-paper';


function Todos(){
    const [ todo, setTodo ] = useState('');
    const ref = firestore().collection('todos');

    return (
      <>
        <Appbar>
          <Appbar.Content title={'TODOs List'} />
        </Appbar>
        <ScrollView style={{flex: 1}}>
          <Text>List of TODOs!</Text>
        </ScrollView>
        <TextInput label={'New Todo'} value={todo} onChangeText={setTodo} />
        <Button onPress={() => {}}>Add TODO</Button>
      </>
    );
}

export default Todos;

그리고 index.js를 아래와 같이 수정합니다.

만약, index.android.js 와 index.ios.js로 나눠져 있다면 원하는 플랫폼에 변경합니다.

import { AppRegistry } from 'react-native';
import Todos from './Todos';

AppRegistry.registerComponent('MyAppName', () => Todos);

 

그러면 기본적인 화면이 빌드되면서 Todos List가 보입니다.

현재까지는 DB에 Collection만 생성하고 아무런 동작을 하지 않습니다.

이제 DB와 연동하는 동작을 넣어보겠습니다.

 

Todos.js에 아래와 같이 함수를 추가하고 버튼에 클릭시 함수가 호출하도록 변경합니다.

function Todos() {
  const [ todo, setTodo ] = useState('');
  const ref = firestore().collection('todos');
  // ...
  async function addTodo() {
    await ref.add({
      title: todo,
      complete: false,
    });
    setTodo('');
  }
  // ...
   return (
    <>
      {/* ... */}
      <Button onPress={() => addTodo()}>Add TODO</Button>
    </>
  );
}

이 동작은 FireStore에 저장하는 동작입니다.

 

이렇게 되면 Firestore에 데이터가 전송되게 됩니다.

Firebase Console에서 Cloud Firestore 선택하시면 ADD TODO를 눌렀을대 전송된 Todo List를 볼 수 있습니다.

만약, 보이지 않는 다면 Database 생성 버튼을 눌러 우선 Database를 생성해주세요.

 

Database가 생성되고 동작을 다시 진행하면 콘솔화면에서 아래와 같은 화면을 볼 수 있습니다.

 

위와 같은 화면이 나오면 정상 동작입니다.

이제 다음편에서는 저장된 Todo List를 가져와 보도록 하겠습니다.