RN) AsyncStorage

https://reactnative.dev/docs/asyncstorage
더이상 지원하지 않음

https://reactnative.directory/?search=storage

커뮤니티로 넘김

AsyncStorage Library

• Android의 SharedPerferences 와 비슷한 기능

// ## AsyncStorage Library - Android의 SharedPerferences 와 비슷한 기능

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function Main() : JSX.Element {

    // 텍스트 인풋 요소의 글씨가 변경될 떄 마다 저장하는 state 변수
    const [inputText , setInputText] = useState<string>('')

    // 저장된 텍스트 보여주는 state 변수
    const [data, setData] = useState<string>('Result')

    const changeText = (value:string) => {
        setInputText(value)
    }

    //save data to local storae method
    const saveData = () => {
        //텍스트인풋 요소에 있는 글씨를 AsyncStorage에 저장
        //값 저장 [key-value] 쌍으로 저장

        //텍스트 인풋 요소의 글씨가 변경될 떄 마다 저장하는 state 변수 필요 : inputText

        //비동기 작업이기에 pomiss문법인 .then() 메소드 사용
        AsyncStorage.setItem("Data",inputText).then( ()=> Alert.alert('saved Data') ) 
        setInputText("")

    }

    //load data to local storae method
    const loadData = async ()=> {
        //비동기로 AsyncStorage에 "Date"라는 키의 value값을 읽어오기
        //async-await 문법으로 비동기 작업을 동기 작업처럼 처리하기
        let value  = await AsyncStorage.getItem("Data") // 얘는 리턴을 nullable로 온다
        if(value != null) setData(value) //null 체크 필수~!~!
    }

    return (
        <View style={style.root}>

            {/* 저장할 데이터 입력할 컴포넌트 */}
            <TextInput
                style={style.TextInput}
                placeholder="Enter some text here"
                value={ inputText }
                onChangeText={changeText}
            ></TextInput>
            <Button title="save data" onPress={saveData}></Button>

            <View style={{marginTop : 16}}></View>

            <Button title="load data" color={'pink'} onPress={loadData}></Button>
            {/* 변경된 텍스트 보여주려면 무조건 변수 */}
            <Text style={style.text}> {data} </Text>
        </View>
    )

}

const style = StyleSheet.create({
    root : {
        padding : 16,
        flex : 1
    },
    TextInput : {
        paddingLeft : 16,
        paddingRight : 16,
        borderWidth : 1,
        borderRadius : 8,
        borderColor : 'black',
        marginBottom : 16,
    },
    text : {
        padding : 8,
        marginTop : 16,
        color : "black",
        fontSize : 24,
        fontWeight : "bold",
    }
})