작성한 onToggle 함수의 특정 항목 업데이트 원리는 4.1.2.3절에서 다룬 것과 동일합니다. 이 코드를 해석해볼까요? todos 배열의 모든 항목에 대해 todo.id 값이 함수의 파라미터로 받아온 id 값과 일치하면 done 값을 반전시키고, 그렇지 않으면 기존 객체를 그대로 유지하겠다는 의미입니다.

이제 TodoList 컴포넌트를 열어 방금 받아온 onToggle 함수를 TodoItem 컴포넌트에 그대로 Props로 전달해주세요.

components/TodoList.js

import React from 'react';
import {FlatList, View, StyleSheet} from 'react-native';
import TodoItem from './TodoItem';

function TodoList({todos, onToggle}) {
  return (
    <FlatList
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      style={styles.list}
      data={todos}
      renderItem={({item}) => (
        <TodoItem
          id={item.id}
          text={item.text}
          done={item.done}
          onToggle={onToggle}
        />
      )}
      keyExtractor={item => item.id.toString()}
    />
  );
}

(...)