[React Native] AsyncStorage = localStorage 를 대신해 앱이 꺼져도 디바이스에 데이터 저장

ReactNative 에서는 브라우저와 다르게 웹의 ‘localStorage’ API를 직업 사용할 수 없다.
AsyncStorage 를 사용해 로컬 스토리지와 유사한 기능을 구현할 수 있다
AsyncStorage 는 비동기식으로 데이터를 저장하고 불러오는 메서드를 제공한다.
AsyncStorage 에는 문자열만 저장할 수 있다. (Json.stringify 사용)

[ 사용법 ]

AsyncStorage 설치

프로젝트 디렉토리에서 터미널을 열고 다음 명령어를 실행하여 AsyncStorage를 설치한다.
```
 npm install @react-native-async-storage/async-storage
```

AsyncStorage 사용

 // AsyncStorage를 사용하기 위해 필요한 import
 import AsyncStorage from '@react-native-async-storage/async-storage';

 // 데이터 저장 함수
 const storeData = async (key, value) => {
   try {
     // AsyncStorage에 데이터 저장
     await AsyncStorage.setItem(key, value);
   } catch (e) {
     // 에러 처리
     console.error('Error storing data:', e);
   }
 };

 // 데이터 불러오기 함수
 const getData = async (key) => {
   try {
     // AsyncStorage에서 데이터 불러오기
     const value = await AsyncStorage.getItem(key);
     if (value !== null) {
       // 데이터가 존재할 경우 처리
       console.log('Data retrieved successfully:', value);
     } else {
       // 데이터가 존재하지 않을 경우 처리
       console.log('No data found');
     }
   } catch (e) {
     // 에러 처리
     console.error('Error retrieving data:', e);
   }
 };

storeData 함수를 사용하여 데이터를 저장하고, getData 함수를 사용하여 데이터를 불러올 수 있다.
```
// 예제 사용
storeData('myKey', 'Hello, AsyncStorage!');
getData('myKey');
```

[ 사용예제 ]

배열이나 객체와 같은 Javascript 데이터 구조를 AsyncStorage 에 저장할 때는 해당 데이터를 문자열로 변환해야 한다. 이를 위해 Json.stringfiy 를 사용한다.
todos 는 Javascript 객체들의 배열이다.

import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Calendar } from 'react-native-calendars';
import TodoList from './TodoList.js';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [selectedDate, setSelectedDate] = useState(''); // 선택된 날짜 저장할 상태 변수
  const [todos, setTodos] = useState([]); // Todo 목록을 저장할 상태 변수

  // #region 비동기 AsyncStorage 관련 함수
  useEffect(() => {
    const getData = async () => {
      try {
        //## 앱이 시작될 때 이전에 저장한 데이터를 불러오기
        const value = await AsyncStorage.getItem('todos');
        if (value !== null) {
          setTodos(JSON.parse(value));
        }
      } catch (e) {
        console.error('Error retrieving data 데이터 가져오기 실패 :', e);
      }
    };

    getData();
  }, []);

  //## todos 가 변경될때마다 AyncStore 에 저장
  useEffect(() => {
    const sotreData = async () => {
      try {
        await AsyncStorage.setItem('todos', JSON.stringify(todos));
      } catch (e) {
        console.error('Error storing data 데이터저장 실패 :', e);
      }
    };

    sotreData();
  }, [todos]);
  //데이터 저장 함수

  // #region SelectedDate
  const onDayPress = (day) => {
    setSelectedDate(day.dateString);
  };
  // #endregion

  // #region addTodo
  const addTodo = (newTodo) => {
    if (newTodo.trim() !== '') {
      setTodos((prevTodos) => [
        ...prevTodos,
        { id: Date.now().toString(), text: newTodo, date: selectedDate },
      ]);
    }
  };
  // #endregion

  const deleteTodo = (id) => {
    setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
  };

  // 선택한 날짜와 todo 의 날짜가 일치한 것만 필터링
  const filteredTodos = todos.filter((todo) => todo.date === selectedDate);

  return (
    <View style={styles.container}>
      {/* 달력 컴포넌트 */}
      <Calendar onDayPress={onDayPress} style={styles.calenderWrap} />
      <Text style={styles.selectedDateText}>SelectedDate : {selectedDate}</Text>
      {/* TodoList 컴포넌트에 필터링된 Todo 목록과 추가 함수 전달 */}
      <TodoList
        onAddTodo={addTodo}
        todos={filteredTodos}
        onDeleteTodo={deleteTodo}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: '15%',
    // backgroundColor: '#000000',
    width: 'auto',
    borderWidth: 4,
    borderColor: '#ff0000',
  },

  calenderWrap: {
    // backgroundColor :'transparent',
  },

  selectedDateText: {},
});

저작자표시

Yun

[React Native] AsyncStorage = localStorage 를 대신해 앱이 꺼져도 디바이스에 데이터 저장

[ 사용법 ]

[ 사용예제 ]

티스토리툴바