React
todo 앱 만들기 (1단계)
일등하이
2021. 7. 1. 14:27
반응형
import React, { useState } from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
import Header from "./components/header";
import TodoItem from "./components/todoItem";
export default function App() {
const [todos, setTodos] = useState([
{ text: "buy coffee", key: "1" },
{ text: "create an app", key: "2" },
{ text: "play on the switch", key: "3" },
]);
const pressHandler = key => {
setTodos(prevTodos => {
return prevTodos.filter(todo => todo.key != key);
});
};
return (
<View style={styles.container}>
<Header />
<View style={styles.content}>
<View style={styles.lists}>
<FlatList
data={todos}
renderItem={({ item }) => (
<TodoItem item={item} pressHandler={pressHandler} />
)}
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
},
content: {
padding: 40,
},
list: {
marginTop: 20,
},
});
import React from "react";
import { StyleSheet, View, Text } from "react-native";
export default function Header() {
return (
<View style={styles.header}>
<Text style={styles.title}>My Todos</Text>
</View>
);
}
const styles = StyleSheet.create({
header: {
height: 80,
paddingTop: 38,
backgroundColor: "coral",
},
title: {
fontSize: 20,
textAlign: "center",
color: "#fff",
fontWeight: "bold",
},
});
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
export default function TodoItem({ item, pressHandler }) {
return (
<TouchableOpacity onPress={() => pressHandler(item.key)}>
<Text style={styles.item}>{item.text}</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
item: {
padding: 16,
marginTop: 16,
borderColor: "#bbb",
borderWidth: 1,
borderStyle: "dashed",
borderRadius: 10,
},
});
https://www.youtube.com/watch?v=SGEitne8N-Q&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=10
반응형