개요

• Insert : 할 일 추가
• Delete : 할 일 삭제
• Edit : 할 일 수정
• complete : 할 일 완료

Todo list 기능

1. Insert 할 일 추가

App.js

  const onInsert = text => {
    const nextId =
      todos.length > 0 ? Math.max(...todos.map(todo => todo.id)) + 1 : 1;

    const todo = {
      id: nextId,
      text,
      done: false,
      Editable: false,
    };

    setTodo(todos.concat(todo));
  };

nextId : todo id 값을 todo 인자에 넣는다. todos.map = todo.id 값을 찾아 새로운 배열로 만들고 그 중에서 최대값을 찾아 +1을 해줘 새로운 id값을 만들어준다.

todo : Insert시 새로운 아이템 id, text, done, Editable을 관리

setTodo : 새로운 아이템 셋팅

AddText 컴포넌트 함수의 props의 인자값으로 전달

 <AddText onInsert={onInsert} />
        

addText.js

function AddText({onInsert}) {
  const [text, setText] = useState('');

  const onPress = () => {
      onInsert(text);
      setText('');
      Keyboard.dismiss();
    } 
  };

  return (
    <View style={styles.view}>
      <TextInput 
        placeholder="Add Task" 
        style={styles.input} 
        maxLength={10}
        value={text}
        onChangeText={setText}
        returnKeyType="done"
      />

      <TouchableOpacity onPress={() => onPress}>
        <Image source={require('../com/plus.png')} style={styles.img} />
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  view: {
    height: 50,
    justifyContent: 'center',
    flexDirection: 'row',
    paddingHorizontal: 16,
    backgroundColor: '#deb887',
    borderRadius: 20,
    margin: 25,
  },
  input: {
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: 20,
    borderRadius: 15,
    borderColor: '#800000',
    color: '#000000',
    paddingVertical: 8,
    flex: 1,
  },

  img_view: {
    width: 30,
    height: 30,
  },

  img: {
    width: 40,
    height: 40,
    marginLeft: 30,
    marginTop: 5,
  },
});

export default AddText;

적용한 UI

Insert text1, Insert text2, Insert text3이 추가되는 걸 볼 수 있다.

• 추가로 빈 텍스트를 입력시 '할 일을 입력해주세요' 알람기능을 만들었다

if (text.trim().length === 0){
      Alert.alert('할 일을 입력해주세요');
    } else {
      onInsert(text);
      setText('');
      Keyboard.dismiss();
    }

2. Delete 할 일 삭제

App.js

  const onDelete = id => {
    const nextTodos = todos.filter(todo => todo.id !== id);
    setTodo(nextTodos);
  };

onDelete는 id값을 통해 위치를 찾고 해당 데이터를 삭제한다.

nextTodos : fileter 함수를 통해 todo 데이터안의 찾고자 하는 위치의 id을 구해 반환해준다.

setTodo : 데이터 셋

Todo 컴포넌트 함수의 props 인자값으로 전달

 <Todo
            todos={todos}
            onDelete={onDelete}

todo.js

function Todo({todos, onDelete}) {

  return (
    <FlatList
      style={styles.list}
      data={todos}
      renderItem={({item}) => (
        <Item
          id={item.id}
          text={item.text}
          done={item.done}
          editable={item.Editable}
          onDelete={onDelete}
         />
      )}
      keyExtractor={item => item.id.toString()}
    />
  );
};

onDelete={onDelete}와 function Todo({onDelete})를 추가해주었다.

Item.js

function Item({id, text, done, editable, onDelete}) {
  const onPress_onDelete = () => {
    onDelete(id);
    
    
      <TouchableOpacity onPress={onPress_onDelete}>
        <View style={styles.img_view}>
          <Image source={require('../com/delete.png')} style={styles.img} />
        </View>
      </TouchableOpacity>
      
  };

적용한 UI

삭제 이미지를 클릭하여 Insert text2, Insert text3이 삭제되는 걸 볼 수 있다.

3.Edit 할 일 수정

App.js

const Editable : 할 일 수정 버튼 클릭시 true가 되고 수정할 수 있는 edit이 가능하게 한다.

기본 값은 false로 설정

Editable: false

---

const onModify

  const onModify = id => {
    const nextTodos = todos.map(todo =>
      todo.id === id ? {...todo, Editable: !todo.Editable} : todo,
    );
    setTodo(nextTodos);
  };

nextTods : todo 아이템의 id값을 찾아 Editable의 값을 false -> true로 바꿔준다.

setTodo : 데이터 셋

Todo 컴포넌트 함수의 props 인자값으로 전달

<Todo
            onModify={onModify}
          />

todo.js

function Todo({todos, onModify}) {

  return (
         onModify={onModify}
         )

Item.js

function Item({id, text, done, editable, onModify}) {

  const onPress_onModify = () => {
    onModify(id);
    }
    
      <TouchableOpacity onPress={onPress_onModify}>
        <View style={styles.img_view}>
          <Image source={require('../com/su.png')} style={styles.img} />
        </View>
      </TouchableOpacity>    
  };
  

클릭시 Editable은 false -> true로 변환

---

      <TextInput editable={editable} style={[styles.text, done && styles.line]}>
        {text}
      </TextInput>

Editable은 true이면 TextInput 클릭시 Edit 모드로 변환

추가로 데이터가 수정됐을때 저장되는 기능은 구현을 하지못했다.
프로젝트 (3)에서 소개를 할 예정

적용된 UI

작업환경 설정 텍스트가 Edit Mode로 전환된걸 볼 수 있다.

4.Complete 할 일 완료

App.js

  const onToggle = id => {
    const nextTodos = todos.map(todo =>
      todo.id === id ? {...todo, done: !todo.done} : todo,
    );
    setTodo(nextTodos);
  };

nextTodos : todos 아이템에서 id값을 찾아 done을 false -> true로 변환

setTodo : 데이터 셋

Todo 컴포넌트의 props 인자값으로 전달

<Todo
            onToggle={onToggle}
          />

todo.js

function Todo({onToggle}) {

  return (
    <FlatList
      style={styles.list}
      data={todos}
      renderItem={({item}) => (
        <Item
          onToggle={onToggle}
          />
          )}
            keyExtractor={item => item.id.toString()}
    />
  );
};

Item.js

function Item({id, text, done, onToggle}) {
  const onPress_onToggle = () => {
    onToggle(id);
  };
  
    <TouchableOpacity onPress={onPress_onToggle}>
        <View style={[styles.circle, done && styles.failed]}>
          {done && (
            <Image
              source={require('../com/toggle.png')}
              style={styles.toggle_img}
            />
          )}
        </View>
      </TouchableOpacity>
  
  
  toggle_img: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 25,
    height: 25,
  },

  line: {
    color: '#9e9e9e',
    textDecorationLine: 'line-through',
  }
  

할 일 완료시 true가 되면 할 일이 완료됐다는 표시를 해준다.

적용된 UI

프로젝트 (2)까지 진행하면서 이슈

화면이 스크롤 되기까지 데이터를 추가하고 Edit 모드시 키보드가 나오지 않는 문제를 발견했다. 해결방안과 수정을 할 예정

EditText 저장 기능 Edit시 키보드가 나오지 않는 에러 해결 등등 소개할 예정