데이터 불러오기

불러오기 위해선 비동기 방식을 이해해야하고 localstorage처럼 사용되는 애가 async-storage라는 애다.

npx expo install @react-native-async-storage/async-storage

위와 같이 입력하여 설치

setitem 으로 값 전달

value는 항상 string이여야 한다.

localStorage처럼 쓸 수 있는듯

import { useAsyncStorage } from '@react-native-async-storage/async-storage';

...

const { getItem, setItem } = useAsyncStorage('todos');


const save = async data => {
	try {
		await setItem(JSON.stringify(data || '[]'));
		setTodos(data);
	} catch (error) {
		Alert.alert('저장 실패');
	}
};
const load = async () => {
	try {
		const data = await getItem();
		const todos = JSON.parse(data) || [];
		setTodos(todos);
	} catch (error) {
		Alert.alert('불러오기 실패');
	}
};

위와같이 작성하면 set,get 모두 가능하다. localstorage와 비슷해서 어렵지 않은듯!

삭제와 완료 기능 만들기

const onDelete = id => {
	const newTodos = todos.filter(ele => ele.id != id);
	save(newTodos);
};

const onToggle = id => {
	const newTodos = todos.map(item =>
		item.id === id ? { ...item, isDone: !item.isDone } : item,
	);
	save(newTodos);
};

위와 같이 작업하여, storage에 저장시켜주면 자식 컴포넌트에 함수 연결하여 사용하면 정상 동작한다.