오프라인 우선 앱 개발: React Native, React Query와 AsyncStorage를 활용한 완벽 가이드
2024-10-02 08:12:21소개
현대의 모바일 애플리케이션 사용자는 오프라인에서도 원활하게 작동하는 앱을 기대하고 있습니다. 특히 외부 인터넷 연결이 불안정한 환경에서 데이터의 손실 없이 사용할 수 있는 앱에 대한 수요가 증가하고 있습니다. 이러한 필요를 충족시키기 위해 오프라인 우선(Offline-First) 애플리케이션 개발이 주목받고 있습니다. React Native, React Query, 그리고 AsyncStorage를 이용한 오프라인 우선 앱 개발에 대한 이 블로그 포스트에서는 이러한 기술들의 조합을 통해 어떻게 오프라인 우선 앱을 구축할 수 있는지 자세히 살펴보겠습니다.
배경 및 필요성
오프라인에서 앱이 정상적으로 작동하기 위해서는 몇 가지 기초 개념이 필요합니다. 가장 먼저, 사용자 데이터가 로컬 장치와 서버 양쪽에 저장되어야 합니다. 이를 통해 사용자가 인터넷이 끊겼을 때도 데이터를 수정할 수 있으며, 다시 연결되었을 때 서버에 변경사항을 동기화할 수 있습니다.
하지만 많은 양의 데이터를 처리해야 하는 앱에서는 오프라인 우선 접근 방식이 단순히 로컬 저장소에 모든 데이터를 저장하는 것이 아니라, 전략적으로 저장 방식에 대한 고민이 필요합니다. 이 때 사용할 수 있는 전략으로는 데이터의 지연 로딩, 일부 데이터의 부분적 저장, 필요 시 동기화, 특정 기능의 오프라인 모드 등이 있습니다. 이러한 접근은 사용자에게 더 나은 경험을 제공합니다.
핵심 내용
이번 글에서 우리는 React Native를 사용하여 간단한 Todo 리스트 앱을 구축할 것입니다. 사용자는 할 일을 추가하고 가져올 수 있으며, 이 앱은 온라인과 오프라인 모두에서 작동하게 됩니다. 이 앱을 만드는 과정에서는 다음과 같은 주요 단계가 포함됩니다:
- 새로운 프로젝트 초기화
- 필요한 라이브러리 설치
- 기본 UI 구성
- 오프라인 데이터 저장 및 동기화 구현
이제 각 단계를 살펴보겠습니다.
새로운 프로젝트 초기화
먼저 React Native 프로젝트를 생성하기 위해 아래의 명령어를 터미널에 입력합니다.
npx react-native@latest init TodoApp
프로젝트 폴더 안에 src 폴더를 만들어 모든 코드 파일을 저장할 공간을 마련합니다.
필요한 라이브러리 설치
이번 프로젝트에서는 다음의 3개 라이브러리가 필요합니다:
- React Query: 데이터 fetching 라이브러리로, 서버 상태의 fetching, caching, synchronizing, updating을 쉽게 처리할 수 있도록 도와줍니다.
- AsyncStorage: 비동기적이고 암호화되지 않은, 지속적인 키-값 저장 시스템입니다.
- Lodash: 현대적인 JavaScript 유틸리티 라이브러리로 다양한 기능을 제공합니다.
이 라이브러리들을 설치하려면 아래의 명령어를 실행합니다.
yarn add lodash @react-native-async-storage/async-storage @tanstack/react-query
그리고 iOS를 위한 Pod 설치를 잊지 마세요:
cd ios && pod install
기본 UI 구성
이제 기본적인 사용자 인터페이스를 구성해 보겠습니다. Home.tsx 파일을 생성하고 다음의 코드를 붙여넣습니다.
import React, { useEffect, useState } from 'react';
import {
Button,
FlatList,
SafeAreaView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
export default function Home() {
const [inputText, setInputText] = useState('');
const [todoList, setTodoList] = useState([]);
const onSubmit = () => {
if (inputText.trim()) {
const newTodo = { title: inputText };
setTodoList([...todoList, newTodo]);
setInputText('');
// 데이터를 AsyncStorage에 저장하기 위한 코드 작성 예정
}
};
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<TextInput
style={styles.input}
placeholder="Enter your todo item"
placeholderTextColor={'#888'}
value={inputText}
onChangeText={text => setInputText(text)}
/>
<TouchableOpacity style={styles.button} onPress={onSubmit}>
<Text style={styles.buttonText}>Add</Text>
</TouchableOpacity>
</View>
<FlatList
data={todoList}
renderItem={({ item }) => (
<View style={styles.todoItemCard}>
<Text style={styles.todoItem}>{item.title}</Text>
</View>
)}
keyExtractor={item => item.title}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
width: '100%',
backgroundColor: '#000',
},
container: {
flex: 1,
alignItems: 'center',
gap: 8,
padding: 12,
},
input: {
borderWidth: 2,
borderColor: 'white',
flex: 1,
padding: 16,
borderRadius: 10,
fontSize: 18,
color: '#fff',
marginVertical: 10,
},
button: {
backgroundColor: 'white',
marginLeft: 10,
padding: 12,
borderRadius: 5,
},
buttonText: {
textAlign: 'center',
fontSize: 20,
fontWeight: 'bold',
},
todoItem: {
color: '#000',
fontSize: 20,
},
todoItemCard: {
backgroundColor: 'white',
width: '100%',
marginVertical: 8,
padding: 16,
borderRadius: 5,
},
});
이 코드는 기본적인 UI를 구성하며 할 일을 입력하고 추가하는 기능을 제공합니다. 현재는 추가된 할 일이 로컬 상태에만 저장되지만, 이후에는 AsyncStorage를 사용하여 오프라인에서도 데이터를 저장할 수 있게 개선할 것입니다.
예시
이제 실제로 앱을 실행하여 간단한 Todo 리스트 앱으로 기능을 구현해 봅시다. 먼저 위 코드에서 다룬 UI 요소를 확인한 후, 사용자가 할 일을 입력하고 추가할 수 있는 기능을 시연해 볼 것입니다.
향후에는 AsyncStorage를 통해 저장한 데이터를 불러오는 방법도 구현하여 사용자가 앱을 재시작한 후에도 이전 할 일 목록을 확인할 수 있게 할 것입니다.
결론
오프라인 우선 앱 개발은 현대 애플리케이션에서 매우 중요한 요소입니다. 사용자가 인터넷에 연결되어 있지 않은 상황에서도 데이터를 저장하고 활용할 수 있는 기능은 사용자 경험을 획기적으로 개선할 수 있습니다. React Native, React Query, AsyncStorage를 활용하여 오프라인 우선 앱을 개발하는 과정에서 이 글이 도움이 되길 바랍니다. 더 나아가, 실제의 다양한 데이터 저장 전략과 UI 최적화 방안에 대해서도 연구하고 적용해보시길 권장합니다.