[React Native] Async Storage 사용하기

앱을 개발하다보니 설정된 내용을 저장할 필요가 있어 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 함수에서 상태를 변경하는데

 

상태가 변경되기 전에 렌더링이 된 후 상태가 변경된 후 다시 렌더링을 되는 것을 막기 위해 추가했다.

 

참고 문헌

1. https://github.com/react-native-community/async-storage