Action intent

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

아래와 같이 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 객체로 파싱하도록 합니다. 

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도 그렇고 대세는 좀 더 깔끔한 코드를 추구하는 람다방식이므로 예제의 코딩 방식을 익히도록 합시다

AppState API는 앱의 상태(active, inactive, background)를 이벤트 리스너를 통해 메서드 호출을 받습니다 

AppState의 사용 예

- 앱이 foreground로 변경되었을때 데이터의 갱신

- 주기적인 이벤트 발생시 background, foreground의 상태에 따라 동작 결정

- 앱이 foreground 상태가 됐을 때, 화면의 잠금 상태를  풀기 위해 인증 로직 동작

우선 react-native에서 AppState를 import합니다. 

componentDidMount() override함수에서 AppState.addEventListener(타입, 핸들러함수)를 통해 리스너를 등록합니다. 

handleAppStateChange 핸들러 함수를 정의하고 AppState가 변경될때 마다 log를 찍도록 합니다. 

앱 실행 후 iOS는 커맨드+쉬프트+h , 안드로이드는 Home 버튼을 눌러 홈화면으로 이동하면 개발자 도구의 console을 통해 아래와 같은 로그를 확인할 수 있습니다. 

공식 가이드를 통해 더 자세한 내용과 예제를 확인해 봅니다.

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

앱 개발을 하면서 가장 많이 쓰이는 기능 중 하나인 alert dialog를 띄워 봅니다.

Alert component를 react-native에서 import합니다. 

showMessage: false //Alert dialog의 유무를 확인하는 state를 정의

showAlert() 함수를 정의하여 Alert.alert로 dialog를 띄울 수 있도록 합니다. 

요번 예제에서는 Alert.alert(제목, 메세지, dialog button) 형식으로 기본적인 dialog 모양을 갖추도록 합니다. 

static alert(title, message?, buttons?, options? type?)

공식 가이드에 따르면 위와 같이 추가적인 옵션({cancelable:false})을 파라미터로 전달할 수 있습니다. 

코드에서 정의한 Show Message 버튼을 누르면 showMessage state를 true로 변경하여 render가 호출 되고 true인 경우 Showing message -success 텍스트가 나타나도록 합니다.