🧩 Expo로 Today's ToDoList 만들기(3)- 추가기능 구현

저번 포스팅에 이어서,
스케치 해놓은 대로 스타일링을 해서 틀을 완성 시켜놓았고
이제 그 틀대로 기능을 추가하면 투두리스트 작업은 끝...!

사실 도중에 틀을 조금 수정,,,

사실 먼저 말해두고자 한다면, 스케치한대로 만들지는 못했다.
Modal을 사용해서 키보드를 띄우고, 입력한 대로 목록에 추가시키도록 작업을 진행하다가
Modal에서 뭐가 꼬인건지, 추가버튼을 누르면 기존에 있던 목록이 사라지면서
추가하는 과정에 오류가 생기는걸 해결을 못했다ㅠㅠ

그런후, 대신에 인풋창을 창 맨 하단에 위치시켜서 목록에 추가시키는 스타일링으로
진행을 하고 있었는데,
구글링으로는 쉬워보이는 키보드 위에 인풋창을 띄우는게 왜그리도 안되는건지,,,,🤬

<keyboardAboidingView>를 사용하면 간단하게 되던데
왜 내꺼는 안되는건지ㅠㅠ <ScrollView>와 뭔가가 꼬이는건지
말을 듣지가 않았고....
여러가지 방법으로 시도해봐도 계속 키보드가 인풋창을 가려버리는 바람에
그냥 쉽게.... 맨 위로 올려버리기로 했다ㅠㅠ 시간을 더 쓸수가 없어!!!!

할 일 추가 기능 ✍🏻

기존에 Header에 있는 + 를 클릭하면 키보드창이 뜨도록 스케치를 해두었으나,
계속 띄워져 있는 인풋창에 내용을 입력한 후 v을 클릭하면
목록에 추가될 수 있도록 수정작업을 거쳤다.

1) 목록에 아이템 추가하는 배열 만들기

우선 목록에 아이템들을 추가하고, 삭제하는 기능을 구현하기 위해서 todos라는 이름으로
id,title,checked의 속성을 갖는 객체를 통해 관리하기로 했다.

• id : 각 아이템의 고유 아이디
• title : 아이템의 내용
• checked : 아이템들의 완료 여부 ( true일때 완료상태 )

이후, useState 훅을 통해서 초기 상태값을, 여러개의 목록 객체를 담을 수 있는 배열[]을 넣어준다

const [todos , setTodos ] = useState([]);

목록에 추가하기 위해 addItem 함수를 만든 후 setTodos를 사용해서 배열을 생성한다.

const addItem = text => {
  setTodos([
    ...todos,
    {id : Math.random().toString(), title : text, checked : false},
  ]);
};

• id는 랜덤으로 생성
• title은 입력된 text값이 들어가도록
• checked 속성은 우선 false값으로

기존에 목록에 있는 할일들은 ...todos를 보면, 현재상태의 todos들을 그대로 가져온다는 의미이다.
따라서 setTodos함수를 통해서 이전의 목록은 그대로 유지하면서 새로운 아이템들을 추가한 배열을 생성하는 것이다.

2) TextInput에서 입력되는 값 업데이트되게 하기

이후 App.js에서 <TodoInsert onAddItem={addItem}>처럼 inset컴포넌트에 전달한 후 TodoInsert.js에서 받아서 사용하면 된다.

TextInput에서 입력되는 텍스트값을 받아오기 위해서는 텍스트의 상태값을 관리하는 것도 필요한데, 새로운 useState 훅을 사용하여 관리해준다.
이를 <TextInput>에서는 onChangeText속성을 통해 핸들러 함수로 관리해주고
value값으로는 state값인 newTodoItem넣어주게 되면
실시간으로 입력된 텍스트의 상태가 업데이트 되게 된다.

export default function TodoInsert({onAddItem}) {
 const [newTodoItem, setNewTodoItem] = useState('');
 const itemInputHandler = (newTodo) => {
   setNewTodoItem(newTodo);
 };
 ...
 <TextInput
 ...
 onChangeText={itemInputHandler}
 value={newTodoItem}
 ...

3) 버튼을 통해 아이템이 목록에 추가되게 하기

다음으로는 버튼을 클릭하면 아이템이 목록에 추가될 수 있도록 핸들러 함수를 추가해준다.
onAddItem함수를 통해 입력한 텍스트 값을 받아서 목록에 추가하고,
setNewTodoItme함수를 통해서 버튼이 클릭된 후 입력창을 공백으로 만들어주는 역할을 주어준다.

const addItemHandler = () => {
  onAddItem(newTodo);
  setNewTodoItem('');
}
...
<AddButton onPress={addItemHandler} />
...

4) 리스트에 출력시키기 위해 TodoList에 todos 넘겨주기

앞서 말했던 할 일 목록의 객체가 담긴 배열인 todos를 TodoList컴포넌트에 전달해준다.
이후 배열에 있는 아이템을 각각 TodoListItem컴포넌트에 넘기기 위해 map()을 사용해준다.

export default function TodoList({todos}) {
  return (
    <ScrollView>
    {todos.map(toeo => (
     	<TodoListItem {...todo} />
    ))}
	</ScrollView>
  );
};

아이템 각각에는 고유한 id와 titile, checked라는 key와 value가 담겨있는데
이를 <TodoListItem>컴포넌트에서 받을 수 있다.

export default function TodoListItem({title, id, checked}) {
  return 
  ...
  <ItemContent>{title}</ItemContent>

이렇게 되면 인풋창에 입력한 텍스트가 버튼 클릭을 통해서 리스트에 출력이 된다.