[React Native] Firebase 활용하기 - CRUD(쓰기, 읽기, 수정, 삭제) 편

안녕하세요.

 

이번 시간에는 Firebase를 활용해서 CRUD(쓰기, 읽기, 수정, 삭제)를 진행 해보도록 하겠습니다.

 

크게 어려운 부분이 없으니 잘 따라오실 수 있습니다.

Installation(설치)

# Install & setup the app module
npm install --save @react-native-firebase/app

# Install the firestore module
npm install --save @react-native-firebase/firestore

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

FireStore Create(쓰기)

데이터 저장하기

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import firestore from '@react-native-firebase/firestore';

const App = () => {
  const [addName, setAddName] = useState('');
  const [addAge, setAddAge] = useState('');
  const addCollection = firestore().collection('users');

  const addText = async () => {
    try {
      await addCollection.add({
        name: addName,
        age: addAge,
      });
      setAddName('');
      setAddAge('');
      console.log('Create Complete!');
    } catch (error) {
      console.log(error.message);
    }
  };
  // ...
  return (
    <View>
      {/* ... */}
      <TextInput
        placeholder="name"
        value={addName}
        onChange={e => setAddName(e.nativeEvent.text)}
      />
      <TextInput
        placeholder="age"
        value={addAge}
        onChange={e => setAddAge(e.nativeEvent.text)}
      />
      <Button title="Add Text" onPress={addText} />
    </View>
  );
};

export default App;

Fireabase Database에 정상적으로 코드가 실행되면 아래와 같은 콘솔화면을 확인 할 수 있습니다.

FireStore Read(읽기)

데이터 불러오기

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import firestore from '@react-native-firebase/firestore';

export default function Read() {
  const [users, setUsers] = useState();
  const usersCollection = firestore().collection('users');

  const _callApi = async () => {
    try {
      const data = await usersCollection.get();
      setUsers(data._docs.map(doc => ({ ...doc.data(), id: doc.id })));
      console.log(users);
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <View>
      <Button title="데이터 불러오기" onPress={_callApi} />
      {users?.map((row, idx) => {
        return <Text>{row.id}</Text>;
      })}
    </View>
  );
}

FireStore Update(수정)

데이터 수정하기

import React from 'react';
import { View, Button } from 'react-native';
import firestore from '@react-native-firebase/firestore';

const App = () => {
  const addCollection = firestore().collection('users');
  const DeleteDB = async () => {
    try {
      const rows = await addCollection.where('name', '==', 'ssilook');
      rows.get().then(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
          doc.ref.update({ age: 40 });
        });
      });
      console.log('Update Complete!', rows);
    } catch (error) {
      console.log(error.message);
    }
  };
  // ...
  return (
    <View>
      {/* ... */}
      <Button title="Update DB" onPress={DeleteDB} />
    </View>
  );
};

export default App;

FireStore Delete(삭제)

데이터 삭제하기

import React from 'react';
import { View, Button } from 'react-native';
import firestore from '@react-native-firebase/firestore';

const App = () => {
  const addCollection = firestore().collection('users');
  const DeleteDB = async () => {
    try {
      //   await addCollection.doc('').delete();
      const rows = await addCollection.where('name', '==', 'ssilook');
      rows.get().then(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
          doc.ref.delete();
        });
      });
      console.log('Delete Complete!', rows);
    } catch (error) {
      console.log(error.message);
    }
  };
  // ...
  return (
    <View>
      {/* ... */}
      <Button title="Delete DB" onPress={DeleteDB} />
    </View>
  );
};

export default App;

수고 하셨습니다.