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

React Navigation library를 이용하여 탭과 스택 방식의 네비게이션을 구현할 예정입니다. 

아래 명령어를 통해 필요한 개별 모듈들을 설치합니다. 

npm install --save react-native-gesture-handler react-native-reanimated

npm install --save uuid react-navigation react-navigation-stack react-navigation-tabs

*react-native의 버전이 0.60 이하라면 react-native link react-native-gesture-handler 처럼 외부 모듈을 링크 해주는 작업을 추가

소스파일 구조

https://github.com/action-intent/ReactNative/tree/master/navigator

위 깃허브의 코드 구조를 참고해 주세요.

*프로젝트 생성시 추가되는 index.js는 navigator의 CitiesApp.js을 실행할 수 있도록 수정

앱의 전체 테마 색을 위한 theme.js 추가

primary color를 설정하여 색상 변경 시 쉽게 적용할 수 있도록 함

index.js 생성

*navigation을 위한 index.js임 프로젝트 생성시 만들어지는 index.js와 다름

createStackNavigator(라우트 설정 관련 인수, 스타일)

 navigationOptions : 화면 상단에 타이틀과 back 버튼

CitiesApp.js 생성

cities state : 이름, 나라, 장소배열, ID 속성을 가진 도시 정보 배열

addCity : 도시 정보를 추가 하기 위한 메서드

addLocation : 각 도시의 위치 정보를 추가하기 위한 도시 객체 내 위치 정보 배열

render : Tabs component를 리턴하고 도시 데이터 및 위 두 메서드를 props로 전달

components/CenterMessage.js 빈 화면 표시를 위한 stateless component 추가

AddCity.js 도시 추가를 위한 화면 추가

submit : 입력된 값이 비어있지 않으면 uuidV4를 이용해 ID를 할당, 빈 locations 배열 생성, addCity를 호출하여 추가된 city 정보 추가

navigate를 호출하여 추가된 Cities 탭으로 이동

도시 목록을 표시하는 Cities.js 추가

- CenterMessage를 가져와 빈 리스트 표시

- static navigationOption을 통해 title(rout)바 속성을 설정

- navigate method를 통해 도시 아이템 선택 시 도시 정보를 인자로 City라우트(navigation.state.params)

- render에서는 scrollView를 통해 도시 목록을 보여주고 TouchableWithoutFeedback을 통해 선택한 도시로 이동

각 도시의 주요 장소를 추가하고 출력하는 City.js 추가

- navigationOptions에서 route 객체 반환을 위해 콜백 함수 이용

- addLocation method는 navigation param에서 도시 정보를 가져오고 screenProps의 addLocation을 호출하여 location을 추가

- render에서 도시의 location정보를 scrollView를 통해 출력하고 location을 추가할 수 있는 폼을 추가

손가락이 저릴 정도로 코드를 추가 했다. 실행해보자. 동작은 잘 되지 않는다. 인터페이스만 확인하자

*실행 시 에뮬레이터에서 아래와 같은 메세지와 함께 실행이 되지 않는다면 아래 빌드 터미널을 종료하고 다시 실행해보자.

invariant violation: module rcteventemitter is not a registered callable module (calling receivetouches) callfunctionreturnflushedqueue [native code]:0

*에뮬레이터에서 경고 창 무시하기 react-native run-ios --varient-release 로 실행하면 됨.

데이터 유지하기(AsyncStorage)

앱이 종료된 뒤에도 입력한 데이터를 유지할 수 있도록 캐쉬 모듈을 사용합니다.

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

위 명령어를 통해 AsyncStorage 모듈을 설치합니다. AsyncStorage는 안드로이드의 SharedPreference와 비슷하다고 보시면 됩니다. 

*설치 후 아래와 같은 메세지와 함께 run-ios가 되지 않으면 프로젝트 내 ios폴더에서 pod install로 에뮬레이터에 모듈을 올려준다.

error Could not find the following native modules: RNCAsyncStorage. Did you forget to run "pod install" ?

CitiesApp.js

1. AsyncStorage를 import

2. 저장 key를 정의하고 componentDidMount 메서드에서 캐쉬된 데이터를 불러온다.

3. 데이터 갱신을 위해 addCity, addLocation 메서드에 JSON.stringify를 이용해 cities를 캐쉬 할 수 있도록 한다.

이상으로 Navigation, Style적용 및 데이터 캐쉬를 위한 예제를 마무리 하였습니다. 

어렵더라도 예제 코드를 이해하고 넘어 갈 수 있도록 합니다. 

Tab navigation외 stack, drawer navigation이 있는데 찾아서 연습해 봅시다. 

https://reactnavigation.org/docs/en/next/drawer-based-navigation.html#docsNav