[react native] firebase database를 이용한 메모장 앱 만들기

import { StatusBar } from 'expo-status-bar';
import React, { useState, useRef, useEffect } from 'react';
import {TextInput, SafeAreaView, FlatList,  Button, StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';


var firebaseConfig = {
  apiKey: "--",
  authDomain: "--",
  projectId: "--",
  storageBucket: "--",
  messagingSenderId: "--",
  appId: "--"
};

if(firebase.apps.length==0){
  firebase.initializeApp(firebaseConfig);
}



export default function App() {

  const text1 = useRef(null); 
  const [text, setText] = useState(''); 
  const [data, setData] = useState('');

  


  function delMemo(key) {
   
    firebase
      .database()
      .ref('memo/' + key)
      .set(null);

  }
  
 
  
  function saveMemo() {
    var key = Math.random().toString().replace(".",""); 
    var memo = text; 
  
    firebase
      .database()
      .ref('memo/' + key)
      .set({
        memo: memo,
        regdate: new Date().toString()
      });
    
    text1.current.clear(); 
  }
  
 


  const renderItem = ({item}) => {
    return(
      <View style={{padding:15, borderBottomColor:'#aaa', borderBottomWidth:1,  flexDirection:'row', }}>
        <Text style={{flex:1, }}>
          {item.memo} 
        </Text>
        <Button title="삭제" onPress={()=>delMemo(item.key)} />
      </View>

    )

  }


  useEffect(()=>{

    var changeDataRef = firebase.database().ref('memo').orderByChild("regdate"); 
    
    changeDataRef.on("value", (snapshot)=>{
       console.log(snapshot);  

       const tmp = []; 

       snapshot.forEach((child)=>{        

        tmp.unshift({
            key : child.key, 
            memo: child.val().memo, 
            regdate: child.val().regdate, 
        }); 

       }); 

       console.log(tmp); 
       
       setData(tmp); 

    });



  },[])


    
  return (
    <View  style={{backgroundColor:'#fc0', flex:1, }}>
      <StatusBar style="auto" />
      <SafeAreaView style={{flex:1, }}> 
        <View style={{padding:15, }}> 
          <Text style={{textAlign:'center', fontSize:18, }}>메모장</Text>
        </View>
        <View style={{backgroundColor:'#fff', flex:1, }}>
          <View style={{flexDirection:'row', padding:10, }}>
            <TextInput style={{backgroundColor:'#eee', padding:5, flex:1,   }}
             ref={text1} 
             onChangeText={text => setText(text)}
             placeholder="메모를 입력해주세요"  /> 
            <Button title="저장" onPress={()=>saveMemo()} />
          </View>
          <View>
             <FlatList data={data} renderItem={renderItem}  style={{ padding:15, }} /> 
          </View>
        </View>
      </SafeAreaView>
    </View>
  );
}