[React Native] Todo list 프로젝트(3)

차누·2023년 2월 14일
0

개요

  • 할 일 수정 기능 개발 및 UI 수정
  • AsyncStorage 사용하여 데이터 저장
  • 프로젝트 끝으로 마무리

1.수정 기능 개발 및 UI 수정

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 : 엔터를 누를 시 데이터가 수정된 데이터로 바뀌고 키보드를 받는다.

2. AsyncStorage 사용하여 데이터 저장

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]);

3.프로젝트 끝으로 마무리

아직 너무 부족한게 많았다. 개념부터 코드의 구조까지 몇 번의 시련도 있었지만 성장하고 싶어서 악으로 버텨 마무리한거 같았다.

1.프로젝트 진행하면서 할 일 수정을 개발하는데 제일 어려움을 겪였다.
Edit 이미지를 클릭하여 수정을 할 수 있는 여러 개의 방법 중 제일 효율적인 방법을 찾는데 고민을 하였다. Boolean 값 True, False에 따라 데이터를 수정할 수 있게 만들었다.

  1. 기존의 Todo list 프로젝트 코드 작성시 text 값만 바꿔주었다. 하지만 그렇게 데이터를 변환하는 과정에서 console.log(text) 값과 console.log(item.text)값을 비교했을때 기존의 text 데이터는 바뀌지 않는다는 것을 알 수 있어서 코드를 수정하는데 도움이 되었다.

  2. AsyncStorage의 개념이 익숙치가 않아서 인지 아직 개념이 완전히 잡히지 않았다. 자세히 공부를 해서 벨로그에 올릴 계획이다.

  3. 처음으로 만든 작은 프로젝트이지만 내 코딩 실력으로 만든 첫번째 프로젝트이므로 의미가 너무 컸다. 뿌듯하기도 하고 더 성장하고 싶은 욕심이 생겨 다음 프로젝트를 계획할 것이다.

https://github.com/Seol0716/Todo

profile
to be good programmer

0개의 댓글