할 일 완료체크 기능 ✅

할 일 목록에서 완료된 일들을 표시하는 기능을 구현해보기로 한다.
스타일링은 요렇게 하기로 😎

1) toggle 기능 추가하기

삭제 기능과 마찬가지로 App.js에서 onToggle함수를 생성한다.

const onToggle = (id) = e => {
  setTodos(
    todos.map(todo => 
      todo.id === id ? {...todo, checked: !todo.checked} : todo,
    ),
  );
};

이는 아이템의 id를 받아와서 해당 아이템의 checked속성을 반대로 변경해준다.
(true->false / false->true)
이후 이를 <TodoLIst>컴포넌트에 전달 후 그대로 TodoList.js로 전달한다.

export default function TodoList({todos, onRemove, onToggle}) {
  return (
    <ScrollView>
      {todos.map(todo => (
        <TodoListItem
     	  key={todo.id}
          {...todo}
	  onRemove={onRemove}
	  onToggle={onToggle}
	 />
       ))}
    </ScrollView>
  );
};

이후 TodoListItem.js에서는 <TouchableOpacity>에 onPressOut이벤트에 onToggle()함수를 할당한다.
그런 후 checked가 true일 때의 스타일링, false일때의 스타일링을 구분해주면 된다.
나는 체크스타일링은 FontAwesome의 아이콘을 사용하기로 하였고,
체크됬을 때 텍스트가 옇어졌으면 해서 해당 태그에 스타일링을 추가하였다.

export default function TodoListItem({title, id, checked,
                                      onRemove, onToggle}) {
  return (
    ...
    <TouchableOpacity onPressOut={onToggle(id)}>
      {checked ? (
       	<Check>
       	  <FontAwesome name="check" color="#000" size={13} />
  	</Check>
	) : ( <UnCheck /> )
       }
    </TouchableOpacity>
	<ItemContent style={checked ? {color: "#444"} :
    	  {color: "#fff"}}>
          {title}
	</ItemContent>