코드 정리

App.js

@@ -6,8 +6,8 @@
  * @flow strict-local
  */
 
-import React, {useEffect, useRef} from 'react';
-import {SafeAreaView, StyleSheet, Text} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {SafeAreaView, StyleSheet, Text, View, FlatList} from 'react-native';
 import {DEBUG, enablePromise, openDatabase} from 'react-native-sqlite-storage';
 
 DEBUG(true);
@@ -16,75 +16,35 @@ enablePromise(true);
 const db = openDatabase({
   name: 'TestDB',
   location: 'default',
-  createFromLocation: '~TestDB.db',
+  createFromLocation: '~TestDB.db', // android/src/main/assets/TestDB.db 파일을 위치 시킴
 });
 
 const App = () => {
-  const dbRef = useRef(null);
+  const [users, setUsers] = useState([]);
 
-  const populateDatabase = async db => {
-    // await db.executeSql('SELECT 1 FROM Version LIMIT 1');
-    (await db).transaction(queryUser);
+  const populateDatabase = async DB => {
+    await DB.transaction(queryUser); // 반드시 (await db)를 해야 프라미스가 성공
   };
 
   const loadAndQueryDB = async () => {
     try {
       console.log('load and db query ....');
-      // db.transaction(function (txn) {
-      //   txn.executeSql(
-      //     "SELECT name FROM sqlite_master WHERE type='table' AND name='tbl_user'",
-      //     [],
-      //     function (tx, res) {
-      //       console.log('item:', res.rows.length);
-      //       if (res.rows.length == 0) {
-      //         txn.executeSql('DROP TABLE IF EXISTS tbl_user', []);
-      //         txn.executeSql(
-      //           'CREATE TABLE IF NOT EXISTS tbl_user(user_id INTEGER PRIMARY KEY AUTOINCREMENT, user_name VARCHAR(20), user_contact INT(10), user_address VARCHAR(255))',
-      //           [],
-      //         );
-      //       }
-      //     },
-      //   );
-      // });
-      // db.transaction(function (tx) {
-      //   console.log('transaction started....');
-      //   tx.executeSql(
-      //     'select * from users',
-      //     [],
-      //     function (tx, res) {
-      //       console.log('item length', res.rows.length);
-      //       for (let i = 0; i < res.rows.length; i++) {
-      //         const element = res.rows.item(i);
-      //         console.log('element=', element);
-      //       }
-      //     },
-      //     function (error) {
-      //       console.log(error);
-      //     },
-      //   );
-      // });
-      // SQLite.openDatabase({
-      //   name: 'TestDB',
-      //   location: 'default',
-      //   createFromLocation: '~TestDB.db',
-      // }).then(db => {
-      //   dbRef.current = db;
-      //   db.transaction(tx => tx.executeSql('select * from users', []));
-      //   // populateDatabase(db);
-      // });
-      // dbRef.current = db;
-      await populateDatabase(db);
+      await populateDatabase(await db);
     } catch (error) {
       console.log(error);
     }
   };
 
-  const closeDatabase = async db => {
-    if (db) {
+  const closeDatabase = async DB => {
+    if (DB) {
       console.log('closing database ...');
       try {
-        await db.close();
-        console.log('Database closed');
+        (await DB).close(
+          () => {
+            console.log('Database was closed successfully');
+          },
+          err => console.log(err),
+        );
       } catch (error) {
         console.log(error);
       }
@@ -95,14 +55,16 @@ const App = () => {
 
   const queryUser = async tx => {
     console.log('Excuting user query');
-    console.log('tx', tx);
     try {
       const [txn, results] = await tx.executeSql('SELECT * FROM users');
       console.log('item length', results.rows.length);
+      const temp = [];
       for (let i = 0; i < results.rows.length; i++) {
         const element = results.rows.item(i);
+        temp.push(element);
         console.log('item ', element);
       }
+      setUsers(temp);
     } catch (error) {
       console.log('error in query user', error);
     }
@@ -111,34 +73,40 @@ const App = () => {
   useEffect(() => {
     loadAndQueryDB();
     return () => {
-      closeDatabase(db);
+      // closeDatabase(await db); // 컴포넌트 없어질 때 디비 닫기 Error!!!
     };
   }, []);
 
+  let listViewItemSeparator = () => {
+    return (
+      <View style={{height: 0.2, width: '100%', backgroundColor: '#808080'}} />
+    );
+  };
+
+  let listItemView = item => {
+    console.log('item in list view', item);
+    return (
+      <View key={item.name}>
+        <Text>Name: {item.name}</Text>
+        <Text>Age: {item.age}</Text>
+      </View>
+    );
+  };
+
+  console.log('users', users);
   return (
     <SafeAreaView>
       <Text>Hello</Text>
+      <View style={{backgroundColor: 'red'}}>
+        <FlatList
+          data={users}
+          ItemSeparatorComponent={listViewItemSeparator}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({item}) => listItemView(item)}
+        />
+      </View>
     </SafeAreaView>
   );
 };
 
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
 export default App;