다음으로 TodoItem 컴포넌트에서 onToggle을 사용합니다. 좌측에 체크 아이콘이 나타나는 원을 터치할 수 있는 영역으로 만들 텐데, 그렇게 하기 위해서 필요한 컴포넌트를 TouchableOpacity 컴포넌트로 감싸주겠습니다. 이 컴포넌트는 2장에서도 사용해봤죠?

components/TodoItem.js

import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';

function TodoItem({id, text, done, onToggle}) {
  return (
    <View style={styles.item}>
      <TouchableOpacity onPress={() => onToggle(id)}>
        <View style={[styles.circle, done && styles.filled]}>
          {done && (
            <Image
              source={require('../assets/icons/check_white/check_white.png')}
            />
          )}
        </View>
      </TouchableOpacity>
      <Text style={[styles.text, done && styles.lineThrough]}>{text}</Text>
    </View>
  );
}

(...)