728x90
반응형
앱을 개발하다보니 설정된 내용을 저장할 필요가 있어 async-storage를 사용하게 되었다.
React Native 버전이 0.59 이하인 경우 아래와 같이 하면 된다.
버전이 0.60 이상인 경우 link를 해주지 않아도 된다.
$ npm install @react-native-community/async-storage
$ react-native link @react-native-community/async-storage데이터를 불러올 때 예제에서는 async, await 를 사용하는데
constructor에서는 사용할 수 없어 componentDidMount를 async 함수로 사용했다.
constructor() {
super();
this.state = {
...,
isLoading: true,
...
};
}
async componentDidMount () {
...
try {
const value = await AsyncStorage.getItem('key');
if (value !== null) {
const data = JSON.parse(value);
this.setState(data);
}
} finally {
this.setState({isLoading: false});
}
...
}
storeData = async (value) => {
try {
await AsyncStorage.setItem('key', value)
} catch (e) {
}
}isLoading을 넣어준 이유는 데이터를 읽은 후 setState 함수에서 상태를 변경하는데
상태가 변경되기 전에 렌더링이 된 후 상태가 변경된 후 다시 렌더링을 되는 것을 막기 위해 추가했다.
참고 문헌
반응형
'React Native' 카테고리의 다른 글
| [React Native] SQLite 사용하기 (0) | 2020.02.20 |
|---|---|
| [React Native] AdMob 라이브러리 변경 (0) | 2020.01.25 |
| [React Native] MultiDex 추가 (0) | 2020.01.25 |
| [React Native] Firebase 충돌 해결 (0) | 2020.01.25 |
| [React Native] Firebase Analytics 사용 (0) | 2020.01.25 |