본문 바로가기

프로그래밍

[react native] 메모(저장 및 불러오기) 앱

반응형
import { StatusBar } from 'expo-status-bar';
import React, {useEffect, useState, } from 'react';
import { StyleSheet, Text, View, SafeAreaView, Button, TextInput   } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';



export default function App() {

  const [txt, setTxt] = useState('안녕하세요.');
  
  
  useEffect(() => {
    loadData(); 
  }, []);
  


  const saveData = async (value) => {
    try {
      await AsyncStorage.setItem('assa', value)
      console.log('저장');
    } catch (e) {
      // saving error
    }
  }

  const loadData = async () => {
    try {
      const value = await AsyncStorage.getItem('assa')
      if(value !== null) {         
        setTxt(value); 
      }
    } catch(e) {
      // error reading value
    }
  }  





  return (
    <View style={{flex:1, backgroundColor:'#fc0', }}>
      <SafeAreaView style={{flex:1, }}>
        <StatusBar style="auto" />     

          <View style={{padding:10, flexDirection:'row', 
                        alignItems:'center', justifyContent:'space-between' }}>
            <Button title="저장" onPress={()=>saveData(txt)} ></Button>
            <Text style={{ fontSize:18, }}>메모장</Text>
            <Button title="불러오기"  onPress={()=>loadData()} ></Button>
          </View>

          <View style={{backgroundColor:'#eeeeee', flex:1, padding:10,   }}>
            <TextInput  value={txt} 
            onChangeText={txt => setTxt(txt) } 
            multiline 
            />
          </View>
      </SafeAreaView>
    </View>
      

  );
} 
반응형