import React, {useState} from 'react' ;
import {StyleSheet, Text, View, ScrollView} from 'react-native';
//ScrollView를 해야 밑에 내릴 수 있음
export default function App() {
    const [people, setPeople] = useState([
        { name : 'shaun', key: '1'},
        { name : 'yoshi', key: '2'},
        { name : 'shaun', key: '3'},
        { name : 'shaun', key: '4'},
        { name : 'shaun', key: '5'},
        { name : 'shaun', key: '6'},
        { name : 'shaun', key: '7'},
    ]);

return (
    <View style = {styles.container}>

    <ScrollView>
    {people.map((item) => {
        return (
            <View key = {item.key}> 
                <Text style = {styles.item}>{item.name}</Text>
            </View>
        )
    })}
    </ScrollView>
    </View>
    ); //key를 나타내어주어야 error가 안뜸 
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        paddingTop: 40,
        paddingHorizontal: 20 
    },
    item: {
        marginTop: 24,
        padding:30,
        backgroundColor: 'pink',
        fontSize: 24
    }
});