react todolist 코드

app.js

import React, {useState} from 'react';
//State 변수 대신 쓰는 데이터 저장공간
import { KeyboardAvoidingView, TodoTemplate, Platform, StyleSheet, Text, View,TextInput, TouchableOpacity, Keyboard } from 'react-native';
// style.css
import Task from './components/Task';
import TodoTemplate from './components/TodoTemplate';

export default function App() {
  const [task, setTask] = useState();
  // task: 할일 목록 , setTask 할일목록 조작하는 함수
  const [taskItems, setTaskItems] = useState([]);

  const handleAddTask = () => {
    Keyboard.dismiss();
   setTaskItems([...taskItems, task])
   setTask(null);
  }

const completeTask = (index) => {
  let itemsCopy = [...taskItems];
  itemsCopy.splice(index, 1);
  setTaskItems(itemsCopy);
}

  return (
    <View style={styles.container}>
       <TodoTemplate>
      {/* Today's Tasks */}
   
      <View style ={styles.taskWrapper}>
        <Text style ={styles.sectionTitle}>Today's tasks</Text>

        <View style={styles.items}>
          {/* tasks */}
          {taskItems.map((item, index) => {
            return(
            <TouchableOpacity key={index} onPress ={() => completeTask(index)}>

              <Task  text={item}/> 
            </TouchableOpacity>
          )
          
          })}
          {/* <Task text={'Task 1'}/>
          <Task text={'Task 2'}/> */}
          
        </View>
        
       
      </View>
     

      {/* write a task */}
      <KeyboardAvoidingView
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    style={styles.writeTaskWrapper}>

      <TextInput style={styles.input} placeholder={'Write a task'}
      value={task} onChangeText={text => setTask(text)}></TextInput>

      <TouchableOpacity onPress={() => handleAddTask()}>
        <View style={styles.addWrapper}>
          <Text style={styles.addText}></Text>
        </View>
      </TouchableOpacity>
      </KeyboardAvoidingView>


      </TodoTemplate>
      </View>
   
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E8EAED',

  },
  tasksWrapper: {
  paddingTop: 100,
  paddingHorizontal:20,
},
  sectionTitle: {
  fontSize: 24,
  fontWeight: 'bold'
  },
  items: {
    marginTop: 30,

  },
  writeTaskWrapper: {
    position: 'absolute',
    bottom: 60,
    width: '100%',
    flexDirection: 'row',
    justifyContent:'space-around',
    alignItems: 'center'


  },
  input: {
    paddingVertical: 15,
    paddingHorizontal: 15,
    backgroundColor: '#FFF',
    borderRadius:60,
    borderColor: '#C0C0C0',
    borderWidth: 1,
    width: 250,

  },
  addWrapper: {
    width: 60,
    height: 60,
    backgroundColor: '#FFF',
    borderRadius:60,
    borderColor: '#C0C0C0',
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: '#C0C0C0',
    borderWidth: 1,
  },
  addText: {},
});

task.js

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

const Task = (props) => {

    return (
        <View style={styles.item}>
            <View style={styles.itemLeft}>
                <TouchableOpacity style={styles.square}></TouchableOpacity>
            <Text style={styles.itemText}> {props.text}</Text>

        </View>
        <View style={styles.circular}></View>
        </View>
    )
}

const styles = StyleSheet.create({
item: {
    backgroundColor: '#FFF',
    padding: 15,
    borderRadius: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 20
},
itemLeft:{
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap'

},

square: {
    width: 24,
    height:24,
    backgroundColor: '#55BCF6',
    opacity: 0.4,
    borderRadius: 5,
    marginRight: 15


},
itemText: {
    maxWidth: '80%',
},
circular: {
    width: 12,
    height:12,
    borderColor: '#55BCF6',
    borderWidth:2,
    borderRadius:5
},
});
export default Task;