Skip to content

Instantly share code, notes, and snippets.

@sigmadream

sigmadream/app_1.js

Created Jan 14, 2021
Embed
What would you like to do?
import React, { useState } from 'react';
import {
Button,
ScrollView,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
// 함수형 리액트 구조
export default function App() {
// 상태
const [enteredGoal, setEnteredGoal] = useState('');
const [listGoals, setListGoals] = useState([]);
// ES6에 나오는 Arrow FN
const goalInputHandler = (enteredText) => {
setEnteredGoal(enteredText);
};
const addListGoals = () => {
setListGoals((currnetListGoals) => [...currnetListGoals, enteredGoal]);
};
return (
<View style={styles.screenContainer}>
<View style={styles.inputContainer}>
<TextInput
placeholder="Goal"
style={styles.textInputContainer}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
<Button title="Add" onPress={addListGoals} />
</View>
<ScrollView>
{listGoals.map((goal) => (
<View style={styles.listItemContainer}>
<Text>{goal}</Text>
</View>
))}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
screenContainer: {
padding: 50,
},
inputContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
textInputContainer: {
width: '80%',
padding: 10,
borderWidth: 1,
borderColor: 'black',
},
listItemContainer: {
padding: 10,
marginTop: 10,
backgroundColor: '#ccc',
borderColor: 'black',
borderWidth: 1,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment