Async-Storage에 데이터 저장하기

Async-Storage

[Docs] Docs에 메소드 많움!!

• 모바일 앱에는 브라우저 저장소가 없다. AsyncStorage가 LocalStorage 대신 사용된다.

하지만,,
현재는 deprecated 되었다.
Docs에 따르면 community package를 사용하라고 되어있다.
community에서 만들어준 패키지!!

community package 안에 @react-native-async-storage/async-storage가 있다.
설치하는 방법은 똑같당~

1. 설치하기

expo install @react-native-async-storage/async-storage

2. Storage에 데이터 저장하기

• import 넘길다 (저장할 때 꺼낼 때 둘 다 import ㄱㄱ)
  @react-native-async-storage/async-storage

• async - await를 붙여준다.

import { useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage'

export default function Screen1() {
    const [value, setValue] = useState("");

	// Input에 입력된 값을 value에 저장
    const onChangeInput = (e:NativeSyntheticEvent<TextInputChangeEventData>)=>{
        setValue(e.nativeEvent.text)
    }
    
    // value의 값을 AsyncStorage에 저장
    const storeData = async ()=>{
        try{
           await AsyncStorage.setItem("inputData", value)
           console.log("등록 완료")
        }catch(error){
            console.log(error)
        }
    }
    
  return (
    <ViewContainer>
    // 버튼이 눌리면 함수 실행
    <Storage onPress={storeData}><Text>스토리지 저장</Text></Storage>
  </ViewContainer>
  );
}

3. Storage에서 데이터 꺼내오기

• async - await를 붙여준다.

 useEffect(()=>{
        const getData = async()=>{
            try{
              // AsyncStorage에서 inputData에 저장된 값 가져오기
                const value = await AsyncStorage.getItem("inputData")
                // value에 값이 있으면 콘솔에 찍어줘
                if(value!== null){
                    console.log(value)
                }
            }catch(error){
                console.log(error)
            }
        }
        // 함수 실행
        getData();
    },[])