React Native / Lists, ScrollView

 

App.js

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

export default function App() {
  const [people, setPeople] = useState([
    {name: 'shaun', key: '1'},
    {name: 'yoshi', key: '2'},
    {name: 'mario', key: '3'},
    {name: 'luigi', key: '4'},
    {name: 'peach', key: '5'},
    {name: 'toad', key: '6'},
    {name: 'bowser', 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>
  );

  
}

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

 

key값을 넣지 않은 경우. 아래와 같은 error 발생( in console) 돌아가는덴 문제없음.

 

Each child in a list should have a unique "key" prop.

key 값 필수