Gaon12: 시작

2024-10-23T02:15:10Z

시작

새 문서

== 개요 ==
AsyncStorage는 React Native에서 비동기적으로 데이터를 저장하고 검색할 수 있는 간단한 키-값 저장소이다. 모바일 애플리케이션에서 로컬 데이터를 관리하는 데 유용하며, 비동기 API를 통해 데이터의 저장과 검색을 처리한다.

== 역사와 배경 ==
AsyncStorage는 React Native의 초기 버전부터 제공되어 왔다. 웹의 LocalStorage와 유사한 기능을 모바일 환경에서 제공하기 위해 설계되었으며, React Native 애플리케이션에서 간단한 데이터 저장소로 널리 사용된다.

== 특징 ==
=== 비동기 처리 ===
AsyncStorage는 모든 작업이 비동기적으로 이루어진다. 이는 데이터 저장 및 검색 시 애플리케이션의 UI 스레드가 차단되지 않도록 하여 성능을 향상시킨다.

=== 키-값 저장소 ===
데이터는 문자열 형태의 키와 값으로 저장된다. 이는 간단한 데이터 구조를 저장하는 데 적합하다.

=== 제한된 용량 ===
AsyncStorage는 플랫폼에 따라 저장 용량이 제한될 수 있다. Android에서는 약 6MB, iOS에서는 약 4MB의 데이터 용량 제한이 있으므로 대량의 데이터를 저장하는 데는 적합하지 않다. 필요 시 SQLite 또는 다른 대체 솔루션을 고려해야 한다.

== 설치 및 호환성 ==
AsyncStorage는 다양한 플랫폼에서 사용할 수 있으며, 설치 방법은 다음과 같다:

=== 설치 방법 ===
* '''npm 사용 시''':
: <syntaxhighlight lang="bash">
npm install @react-native-async-storage/async-storage
</syntaxhighlight>
* '''Yarn 사용 시''':
: <syntaxhighlight lang="bash">
yarn add @react-native-async-storage/async-storage
</syntaxhighlight>
* '''Expo CLI 사용 시''':
: <syntaxhighlight lang="bash">
npx expo install @react-native-async-storage/async-storage
</syntaxhighlight>

=== 플랫폼 호환성 ===
* '''Android''', '''iOS''': React Native 0.60+ 필요. CLI 자동 링크 기능이 모듈을 앱 빌드 시 연결.
* '''Windows''': React Native Windows 0.63+ 필요.
* '''macOS''': React Native macOS 0.63+ 필요. <code>macos/Podfile</code>에 <code>platform :macos, '10.14'</code> 설정 후 pods 설치.
* '''Web''': AsyncStorage는 웹을 직접 지원하지 않음. 대신 [[LocalStorage]], [[SessionStorage]], 또는 [[IndexedDB]]를 사용해야 한다.

== AsyncStorage의 사용법 ==
=== 데이터 저장 ===
데이터를 저장하려면 <code>setItem</code> 메서드를 사용한다:

<syntaxhighlight lang="javascript">
import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (key, value) => {
try {
await AsyncStorage.setItem(key, value);
} catch (error) {
console.error('Error storing data', error);
}
};
</syntaxhighlight>

=== 데이터 검색 ===
저장된 데이터를 검색하려면 <code>getItem</code> 메서드를 사용한다:

<syntaxhighlight lang="javascript">
const getData = async (key) => {
try {
const value = await AsyncStorage.getItem(key);
if (value !== null) {
return value;
}
} catch (error) {
console.error('Error retrieving data', error);
}
};
</syntaxhighlight>

=== 데이터 삭제 ===
데이터를 삭제하려면 <code>removeItem</code> 메서드를 사용한다:

<syntaxhighlight lang="javascript">
const removeData = async (key) => {
try {
await AsyncStorage.removeItem(key);
} catch (error) {
console.error('Error removing data', error);
}
};
</syntaxhighlight>

=== 다중 데이터 처리 ===
AsyncStorage는 여러 데이터를 한 번에 처리할 수 있는 메서드를 제공한다:

* '''multiSet''': 여러 키-값 쌍을 한 번에 저장.
* '''multiGet''': 여러 키에 해당하는 값을 한 번에 검색.
* '''multiRemove''': 여러 키에 해당하는 데이터를 한 번에 삭제.
* '''multiMerge''': 여러 키의 데이터를 병합하여 저장.

다중 데이터 처리 예시:
<syntaxhighlight lang="javascript">
const saveMultiple = async () => {
try {
await AsyncStorage.multiSet([['key1', 'value1'], ['key2', 'value2']]);
} catch (error) {
console.error('Error saving multiple items', error);
}
};
</syntaxhighlight>

== 고급 설정 및 성능 최적화 ==
AsyncStorage의 성능을 최적화하거나 데이터 저장 용량을 늘리기 위해서는 다음과 같은 고급 설정을 사용할 수 있다:

=== 데이터베이스 크기 조절 ===
기본적으로 AsyncStorage는 6MB의 용량을 제공하지만, 다음과 같이 크기를 조절할 수 있다. <code>android/gradle.properties</code> 파일에 다음 설정을 추가하면 최대 10MB까지 늘릴 수 있다:
<syntaxhighlight lang="bash">
AsyncStorage_db_size_in_MB=10
</syntaxhighlight>

=== 비동기 작업 최적화 ===
비동기 작업이 반복적으로 발생하는 경우, AsyncStorage의 작업 순서를 관리하여 성능을 최적화할 수 있다. 이는 데이터 저장과 검색이 빈번하게 발생하는 경우에 유용하다.

== 장단점 ==
=== 장점 ===
* '''비동기 처리''': UI 스레드 차단 없이 데이터 작업 가능.
* '''간편한 API''': 키-값 쌍으로 손쉽게 데이터 관리 가능.
* '''플랫폼 독립성''': iOS와 Android 모두에서 동일하게 작동.
* '''Expo 사용 가능''': expo에서도 별도의 설정 없이 바로 사용 가능.

=== 단점 ===
* '''제한된 용량''': 대량의 데이터 저장에 부적합. Android와 iOS에서 각각 약 6MB와 4MB 정도로 제한됨.
* '''보안 문제''': 민감한 데이터를 저장하기에는 보안이 취약할 수 있음. 데이터는 평문으로 저장되므로 [[SecureStore]] 같은 대체 라이브러리 사용을 권장.
* '''동시성 문제''': 다중 스레드 환경에서의 동시 접근 시 충돌 가능성 있음.

== 같이 보기 ==
* [[SecureStore]]: 키를 암호화 해서 OS 암호화 영역에 저장한다. Expo 라이브러리.
* [[MMKV]]: AsyncStorage보다 30배 더 빠른 키-값 저장 라이브러리.

== 참고 문헌 ==
* {{깃허브/저장소|react-native-async-storage|async-storage}}
* [https://react-native-async-storage.github.io/async-storage React Native 문서]
* [https://reactnative.dev React Native 공식 문서]
* [https://docs.expo.dev/versions/latest/sdk/async-storage Expo AsyncStorage 문서]


[[분류:React Native]] [[분류:자바스크립트]] [[분류:Node.js]] [[분류:라이브러리]] [[분류:모바일 프로그래밍]] [[분류:데이터 저장소]]

AsyncStorage - 편집 역사

Gaon12: 시작