App.js
Editable : false
// Edit 상태관리
const onModify = id => {
const nextTodos = todos.map(todo =>
todo.id === id ? {...todo, Editable: !todo.Editable} : todo,
);
setTodo(nextTodos);
};
Editable : 수정모드를 관리하기 위하여 Boolean 타입의 변수를 지정
수정모드 변환시 Edit 이미지를 누르면 true로 바뀌고 수정이 가능
todo.js 코드 수정
import {FlatList, StyleSheet} from 'react-native';
function Todo({todos, onToggle, onDelete, onModify}) {
return (
<FlatList
style={styles.list}
data={todos}
renderItem={({item}) => (
<Item
id={item.id}
text={item.text}
done={item.done}
editable={item.Editable}
onToggle={onToggle}
onDelete={onDelete}
onModify={onModify}
item={item}
/>
)}
keyExtractor={item => item.id.toString()}
/>
);
};
기존의 todo item값이 아닌 item의 데이터 값을 설정하였다.
item.js
<TouchableOpacity onPress={onPress_onModify}>
<View style={styles.img_view}>
<Image source={require('../com/su.png')} style={styles.img} />
</View>
</TouchableOpacity>
Edit 이미지 클릭시 true로 변환 -> 다시 클릭시 false로 변환
<TextInput
editable={editable}
onSubmitEditing={onPress_onEdit}
style={[styles.text, done && styles.line]}
value={newEdit}
onChangeText={newEdit => setEdit(newEdit)}
autoFocus={true}
/>
editable : Editable 값에 따라 수정모드가 관리를 할 수 있게 만들었다.
value: value값은 새로운 데이터로 입력되게 onChangeText로 newEdit로 저장이 되게 만들었다.
const onPress_onEdit = () => {
item.text = newEdit;
Keyboard.dismiss();
}
onChangeText : 엔터를 누를 시 데이터가 수정된 데이터로 바뀌고 키보드를 받는다.
storage/todoStorage.js
import AsyncStorage from '@react-native-community/async-storage';
const key = 'todos';
const todosStorage = {
async get() {
try {
const rawTodos = await AsyncStorage.getItem(key);
if (!rawTodos) {
throw new Error('No saved todos');
}
const savedTodos = JSON.parse(rawTodos);
return savedTodos;
} catch (e) {
throw new Error('Failed to load Todos');
}
},
async set(data) {
try {
await AsyncStorage.setItem(key, JSON.stringify(data));
} catch (e) {
throw new Error('Failed to save todos');
}
},
};
export default todosStorage;
App.js
import todosStorage from './storage/todosStorage';
//불러오기
useEffect(() => {
todosStorage.get().then(setTodo).catch(console.error);
}, []);
//저장
useEffect(() => {
todosStorage.set(todos).catch(console.error);
}, [todos]);
아직 너무 부족한게 많았다. 개념부터 코드의 구조까지 몇 번의 시련도 있었지만 성장하고 싶어서 악으로 버텨 마무리한거 같았다.
1.프로젝트 진행하면서 할 일 수정을 개발하는데 제일 어려움을 겪였다.
Edit 이미지를 클릭하여 수정을 할 수 있는 여러 개의 방법 중 제일 효율적인 방법을 찾는데 고민을 하였다. Boolean 값 True, False에 따라 데이터를 수정할 수 있게 만들었다.
기존의 Todo list 프로젝트 코드 작성시 text 값만 바꿔주었다. 하지만 그렇게 데이터를 변환하는 과정에서 console.log(text) 값과 console.log(item.text)값을 비교했을때 기존의 text 데이터는 바뀌지 않는다는 것을 알 수 있어서 코드를 수정하는데 도움이 되었다.
AsyncStorage의 개념이 익숙치가 않아서 인지 아직 개념이 완전히 잡히지 않았다. 자세히 공부를 해서 벨로그에 올릴 계획이다.
처음으로 만든 작은 프로젝트이지만 내 코딩 실력으로 만든 첫번째 프로젝트이므로 의미가 너무 컸다. 뿌듯하기도 하고 더 성장하고 싶은 욕심이 생겨 다음 프로젝트를 계획할 것이다.