React Native에서 로컬 데이터 저장하기

React Native에서 로컬 데이터를 저장하는 방법을 설명합니다. AsyncStorage와 SQLite를 사용한 데이터 저장법, 각 저장 방식의 장단점을 살펴보며 가장 적합한 저장 방식을 선택하는 방법을 알아보겠습니다.

 

React Native에서 로컬 데이터 저장의 중요성

모바일 앱을 개발하다 보면 많은 경우에서 로컬 데이터 저장이 필요합니다. 사용자 경험을 최적화하기 위해서는 데이터가 항상 빠르게 접근 가능해야 하며, 네트워크 연결 없이도 앱이 잘 작동해야 합니다. 이런 문제는 AsyncStorage와 SQLite를 이용해서 해결할 수 있습니다.

로컬 데이터 저장이 필요한 이유

로컬 데이터 저장은 여러 가지 상황에서 필요합니다. 예를 들어, 사용자가 로그인 정보를 유지하거나 설정 값을 저장하는 경우, 또는 네트워크 연결이 불안정한 상태에서도 오프라인 데이터를 캐싱해야 하는 경우입니다. 제가 개발했던 한 앱에서는 사용자의 즐겨찾기 정보를 저장해야 했는데, 이 정보를 서버에 요청하는 것보다는 로컬에 저장해두는 것이 훨씬 빠르고 사용자 경험도 좋았습니다.

로컬 저장 옵션 비교

React Native에서 로컬 데이터를 저장할 수 있는 옵션은 다양합니다. 가장 대표적인 것이 AsyncStorage와 SQLite입니다. AsyncStorage는 간단한 키-값 형태의 데이터를 저장하는 데 유용하지만, 대량의 구조화된 데이터를 다루기에는 한계가 있습니다. 반면 SQLite는 관계형 데이터베이스로, 복잡한 데이터 구조를 효율적으로 관리할 수 있는 장점이 있습니다. 각 방법의 장단점을 이해하고, 프로젝트의 특성에 맞게 선택하는 것이 중요합니다.

 

AsyncStorage로 간단한 데이터 저장

AsyncStorage 설치 및 설정

AsyncStorage는 간단한 데이터를 저장하는 데 적합한 저장소입니다. 설치 방법도 간단하며, 몇 가지 명령어로 프로젝트에 추가할 수 있습니다. 저는 프로젝트에서 간단한 설정 값을 다룰 때 AsyncStorage를 자주 사용하고 있습니다. 다음 명령어로 설치할 수 있습니다.

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

 

설치 후, import를 통해 사용합니다.

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

 

데이터 저장과 읽기 예제

AsyncStorage를 사용해 데이터를 저장하고 읽는 방법은 다음과 같습니다.

// 데이터 저장하기
await AsyncStorage.setItem('username', 'padawan_joy');

// 데이터 읽기
const username = await AsyncStorage.getItem('username');
console.log(username); // 'padawan_joy'

 

저는 사용자가 앱에 다시 방문했을 때 마지막에 접속한 화면을 기억하는 기능을 구현하기 위해 AsyncStorage를 사용했던 적도 있습니다. 이러한 간단한 데이터 저장에는 AsyncStorage가 매우 유용합니다.

사용 시 고려사항

AsyncStorage는 간단한 데이터를 저장하는 데에는 좋지만, 속도나 보안 측면에서 한계가 있을 수 있습니다. 큰 데이터를 저장하거나 민감한 정보를 저장하는 경우에는 다른 방법을 고려해야 합니다.

 

SQLite를 사용한 복잡한 데이터 관리

SQLite란 무엇인가?

SQLite는 관계형 데이터베이스로, 복잡한 데이터 구조를 다루기 위해 적합합니다. 특히 여러 개의 테이블을 가지고 데이터를 관리해야 할 때 유용합니다. 저는 프로젝트에서 사용자가 여러 가지 정보를 추가하고 편집할 수 있는 기능을 구현하기 위해 SQLite를 사용했습니다. 이 경우 데이터를 구조화하고 효율적으로 관리하는 데 SQLite가 큰 도움이 되었습니다.

React Native에서 SQLite 설치 및 설정

React Native에서 SQLite를 사용하려면 react-native-sqlite-storage 패키지를 설치해야 합니다.

npm install react-native-sqlite-storage

 

설치 후, SQLite 데이터베이스를 열고 사용할 수 있습니다.

import SQLite from 'react-native-sqlite-storage';

const db = SQLite.openDatabase({name: 'my.db', location: 'default'}, () => {
	console.log('Database opened');
}, error => {
	console.log('Error: ', error);
});

 

SQLite 데이터베이스 관리 예제

SQLite를 사용해 데이터를 저장하고 조회하는 방법은 다음과 같습니다.

// 테이블 생성
const createTable = () => {
	db.transaction(tx => {
    	tx.executeSql(
			'CREATE TABLE IF NOT EXISTS Users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, age INTEGER);'
		);
	});
};

// 데이터 삽입
const insertUser = (name, age) => {
	db.transaction(tx => {
    	tx.executeSql('INSERT INTO Users (name, age) VALUES (?, ?)', [name, age]);
	});
};

 

이렇게 SQLite를 이용하면 복잡한 데이터 구조도 효율적으로 저장하고 관리할 수 있습니다.

 

다른 대안: Realm, MMKV

Realm의 장점과 단점

Realm은 SQLite보다 더 높은 성능을 제공하며, 대용량 데이터를 다룰 때 유용합니다. 또한 직관적인 API 덕분에 개발이 간편합니다. 하지만 설정 과정이 복잡하고, 앱 크기가 조금 커질 수 있는 단점이 있습니다.

MMKV의 장점과 단점

MMKV는 빠른 속도와 안정성을 제공하는 저장 방식으로, 특히 간단한 설정 값이나 캐시 데이터를 저장할 때 유용합니다. 프로젝트에서 사용자 설정 값을 빠르게 저장하고 불러오기 위해 MMKV를 사용한 적이 있는데, 성능 면에서 매우 만족스러웠습니다. 하지만 복잡한 데이터를 다루기에는 적합하지가 않습니다.

 

마무리하며

React Native에서 로컬 데이터 저장은 사용자 경험을 좌우하는 중요한 요소입니다. AsyncStorage, SQLite, 그리고 Realm, MMKV와 같은 다양한 저장 방법들이 있으며, 각 방법마다 장단점이 있습니다. 앱의 요구사항에 맞는 저장 방식을 선택하여 최적의 성능과 사용자 경험을 제공할 수 있기를 바랍니다. 로컬 데이터 저장 방식을 적절히 활용하면 더 나은 앱을 개발할 수 있을 것입니다.