Async-Storage
모바일 앱에는 당연히 브라우저 저장소가 없겠죠? 모바일 개발환경에는 대신에 AsyncStorage가 LocalStorage 대신 사용됩니다.
기존에는 react-native에서 Async Storage를 가져올 수 있었는데요. 현재는 deprecated 되었습니다.
사용을 해도 되지만, 앞으로 업데이트 될 예정이 없다는 뜻입니다.
때문에 react-native docs를 읽어보시면 community package를 사용하라고 되어있는데요.
이 community package 안에 **@react-native-async-storage/async-storage**가 있습니다.
이 패키지는 npm에서도 확인할 수 있습니다.
Installation
# npm
npm install @reat-native-async-storage/async-storage
# yarn
yarn add @react-native-async-storage/async-storage
# Expo
expo install @react-native-async-storage/async-storage
Usage
데이터 저장
const storeData = async (value) => {
try {
await AsyncStorage.setItem('@storage_Key', value)
} catch (e) {
// saving error
}
}
데이터 읽기
const getData = async () => {
try {
const value = await AsyncStorage.getItem('@storage_Key')
if(value !== null) {
// value previously stored
}
} catch(e) {
// error reading value
}
}
이것을 이용해서 우리가 localstorage를 이용해서 구현했던 기능들을 사용해줄 수 있겠죠? AsyncStorage에는 보여드린 메서드 이 외에도 다양한 메서드들이 있습니다. AsyncStorage Docs를 확인해보세요!
Debugging Tool
debugging은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다.
웹에서는 개발자 도구에서 콘솔이나 네트워크를 통해서 에러를 찾고 디버깅을 하는데 모바일은 개발자 도구가 없기 때문에 디버깅이 쉽지 않습니다.
그래서 여러분이 사용할 수 있는 React Native Debugging Tool을 몇 가지 소개해드리고자 합니다.
Chrome Debugger
리액트 네이티브에서도 웹에서 하는 것처럼 개발 가능합니다.
# Remote Debugging 실행
1. 디바이스에서 Ctrl+M
2. Remote JS Debugging
3. 크롬에서 아래 주소로 디버그 창이 실행됩니다.
<http://10.2.2:8081/debugger-ui>
4. 디버깅 터미널 보기: Ctrl+Shift+J
일반적으로 내 컴퓨터는 localhost 였는데 앱에서는 localhost가 아니라 10.0.2.2가 됩니다. 내 컴퓨터의 브라우저를 찾는게 아니라 내 컴퓨터에서 디바이스의 주소를 찾아와야하기 때문이겠죠?
Flipper
모바일 개발 환경에서는 console tab과 Network tab을 한 번에 볼 수 없고 심지어 Network 통신은 우리가 확인할 수 없기도 합니다. 이것을 편하게 만들어주기 위해 Facebook에서 만든 것이 Flipper 입니다.
Android
Flipper Desktop App을 실행하고 yarn android를 하면 리액트 네이티브 프로젝트가 Flipper에 표시됩니다.
iOS
프로젝트 디렉토리/ios 에서 pod install을 실행하고 yarn ios를 하면 Flipper에 프로젝트가 표시됩니다.
'FrontEnd > ReactNative' 카테고리의 다른 글
React Native 키보드로 세로길이가 바뀌는것을 막고싶어요! (0) | 2022.10.26 |
---|---|
React Navigation Tab Navigator를 사용하고 싶어요 (0) | 2022.10.26 |
React Native에서는 어떻게 페이지 이동을 하나요? React Navigation이 있어요! (0) | 2022.10.26 |
React-Native 작동원리와 WebView, 기본 태그 및 Styled Component (0) | 2022.10.26 |
React Native 설치하고 실행해보기! (0) | 2022.10.26 |