오프라인 우선 앱 개발: React Native, React Query와 AsyncStorage를 활용한 완벽 가이드

2024-10-02 08:12:21

javascriptreactnativefrontendprogramming

소개

현대의 모바일 애플리케이션 사용자는 오프라인에서도 원활하게 작동하는 앱을 기대하고 있습니다. 특히 외부 인터넷 연결이 불안정한 환경에서 데이터의 손실 없이 사용할 수 있는 앱에 대한 수요가 증가하고 있습니다. 이러한 필요를 충족시키기 위해 오프라인 우선(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 최적화 방안에 대해서도 연구하고 적용해보시길 권장합니다.