React Native 오프라인 저장소 구현하기: AsyncStorage와 Realm

소개

현대 애플리케이션에서는 오프라인에서도 사용자 경험을 높이기 위해 데이터를 로컬에 저장하는 기능이 중요합니다. React Native는 자바스크립트를 사용하여 네이티브 모바일 애플리케이션을 구축할 수 있는 프레임워크로, 다양한 저장 옵션을 제공합니다. 이 글에서는 AsyncStorage와 Realm을 사용하여 오프라인 저장소를 구현하는 방법을 안내합니다.

AsyncStorage 사용하기

AsyncStorage는 React Native에 기본적으로 포함된 키-값 저장소입니다. 이 저장소는 간단한 설정과 사용법으로 인기를 끌고 있습니다.

기본 설치

먼저, 패키지를 설치해야 합니다.

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

사용 예제

다음은 AsyncStorage를 사용하여 데이터를 저장하고 불러오는 기본 예제입니다.

javascript
import AsyncStorage from '@react-native-async-storage/async-storage';

// 데이터 저장
const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) {
    console.error('저장 오류', e);
  }
};

// 데이터 불러오기
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      return value;
    }
  } catch (e) {
    console.error('불러오기 오류', e);
  }
};

주의사항

AsyncStorage는 비동기적으로 작동하며, 대량 데이터를 처리할 때 성능 문제가 발생할 수 있습니다. 이러한 경우 Realm과 같은 더 강력한 솔루션을 고려하는 것이 좋습니다.

Realm 사용하기

Realm은 빠른 성능과 다양한 기능을 제공하는 로컬 데이터베이스입니다. 이는 대용량 데이터 처리와 정교한 쿼리 기능을 요구하는 앱에 적합합니다.

기본 설치

Realm을 사용하려면 먼저 설정이 필요합니다.

bash
npm install realm

또한, React Native 환경에 맞게 해당 패키지의 연동을 확인해야 합니다.

기본 설정

다음은 Realm의 기본 설정 예제입니다.

javascript
import Realm from 'realm';

// 스키마 정의
const TaskSchema = {
  name: 'Task',
  properties: {
    id: 'int',
    name: 'string',
    completed: 'bool',
  },
};

// Realm 초기화
const realm = new Realm({ schema: [TaskSchema] });

데이터 작업

Realm으로 데이터를 저장하고 쿼리하는 방법을 보여줍니다.

javascript
// 데이터 추가
realm.write(() => {
  realm.create('Task', {
    id: 1,
    name: '테스트 작업',
    completed: false,
  });
});

// 데이터 읽기
const tasks = realm.objects('Task');
console.log(tasks);

// 쿼리
const completedTasks = tasks.filtered('completed == true');
console.log(completedTasks);

주의사항

Realm은 비동기 처리를 지원하지 않기 때문에 데이터 작업이 주 스레드를 막을 수 있습니다. 대량의 데이터를 처리할 때는 적절한 데이터 작업과 처리가 필요합니다.

결론

이 글에서는 React Native에서 사용할 수 있는 두 가지 주요 오프라인 저장소 옵션인 AsyncStorage와 Realm에 대해 알아보았습니다. AsyncStorage는 간단한 키-값 저장소로 빠르고 쉽게 사용할 수 있지만, 대량 데이터 처리에는 부적합할 수 있습니다. 반면, Realm은 더 복잡한 기능과 빠른 성능을 제공하지만 초기 설정과 사용이 조금 복잡할 수 있습니다. 각 도구의 장단점을 고려하여 앱의 요구사항에 맞는 솔루션을 선택하는 것이 중요합니다.