크로스 플랫폼 - AsyncStorage

앱의 데이터를 유지하고 저장하는 좋은 방법중 하나이며 비동기 방식입니다. 

 

아래와 같이 AsyncStorage를 설치해줍니다.

npm install --save @react-native-community/async-storage

(0.59부터 async-storage를 따로 추가해줘야함, 0.60 미만 에서는 react-native link를 통해 링크 작업따로 수행)

 

AsyncStorage는 보통 아래와 같은 경우에 많이 사용합니다. 

- 사용자 정보를 저장하여 매번 로그인이 필요없도록 할 때 등 사용자 정보 저장에 용이

- 대용량 데이터를 한번 받아 놓고 재사용

 

먼저 async-storeage에서 AsyncStorage를 import 합니다. 

 

임의의 person 객체를 생성하고 componentDidMount()에서 AsyncStorage.setItem(키, person을 json 형태의 문자열로 변환)을 통해 storage에 저장합니다. 

 

위 저장이 성공 시 then()으로 실패 시 catch()로 결과가 떨어집니다. 

 

반대로 AsyncStorage.getItem(key)를 통해 person 객체를 가져오는 함수 getPerson()를 정의합니다. 

 

then()내부에서 JSON.parse(res)를 통해 결과 문자열을 person 객체로 파싱하도록 합니다. 

 

Get President 버튼을 누르면 Storage에 저장된 결과를 보여준다.

 

AsyncStorage의 더 자세한 가이드는 아래 공식 사이트를 참고합니다. (merge의 사용법도 숙지합니다.)

https://facebook.github.io/react-native/docs/asyncstorage

 

그리고 아래와 같이 async, await 키워드를 통해 좀 더 자바 친숙(promise)한 비동기 storage로직을 구현하는 방법도 있습니다. 

async componentDidMount() {
	try{
    	await AsyncStorage.setItem(key, JSON.stringify(person)
        console.log('item stored')
    } catch (err) {
    	console.log('err: ', err)
    } 
}

 

안드로이드의 kotlin도 그렇고 대세는 좀 더 깔끔한 코드를 추구하는 람다방식이므로 예제의 코딩 방식을 익히도록 합시다