이번에는 할일 완료 상태를 토글하는 기능을 구현해보겠습니다. 토글(Toggle)이란 하나의 값을 다른 값으로 전환하는 것을 의미하는데요. 우리 프로젝트의 경우 done 값을 false → true, true → false로 변경하게 됩니다.

우선 App 컴포넌트에 onToggle이라는 함수를 다음과 같이 작성하고, 해당 함수를 TodoList의 Props로 설정해주세요. 이 함수는 항목의 고유 값인 id를 파라미터로 받아옵니다.

App.js

(...)
function App() {
  const today = new Date();
  const [todos, setTodos] = useState([
    {id: 1, text: '작업환경 설정', done: true},
    {id: 2, text: '리액트 네이티브 기초 공부', done: false},
    {id: 3, text: '투두리스트 만들어보기', done: false},
  ]);

  const onInsert = text => {
    // 새로 등록할 항목의 id를 구합니다.
    // 등록된 항목 중에서 가장 큰 id를 구하고, 그 값에 1을 더합니다.
    // 만약 리스트가 비어있다면 1을 id로 사용합니다.
    const nextId =
      todos.length > 0 ? Math.max(...todos.map(todo => todo.id)) + 1 : 1;
      const todo = {
        id: nextId,
        text,
        done: false,
      };

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

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

  return (
    <SafeAreaProvider>
      <SafeAreaView edges={['bottom']} style={styles.block}>
        <KeyboardAvoidingView
          behavior={Platform.select({ios: 'padding'})}
          style={styles.avoid}>
          <DateHead date={today} />
          {todos.length === 0 ? (
            <Empty />
          ) : (
            <TodoList todos={todos} onToggle={onToggle} />
          )}
          <AddTodo onInsert={onInsert} />
        </KeyboardAvoidingView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}
(...)