React native 03 실습

import { useState } from 'react';
import { Text, View, Button, FlatList, StyleSheet } from 'react-native';

let counter = 0;

const App = () => {
  const [data, setData] = useState([]);


  const addItem = () => {
    counter++;
    const newItem = { key: String(counter), value: `아이템 ${counter}` };
    setData([...data, newItem]); // 새로운 배열을 만들어서 업데이트
  };
  

  const renderItem = ({item}) => (
    <View style={styles.listItem}>
      <Text>{item.value}</Text>
    </View>
  )

  return (
    <View style={styles.container}>
      <Button title="데이터 추가" onPress={addItem}/>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item)=>item.key}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  listItem: {
    padding: 15,
    marginVertical: 5,
    backgroundColor: '#f9c2ff',
    alignItems: 'center'
  }
});

export default App;